❤️ Creative Tim Club - Access all our Present & Future Premium Products

Free Bootstrap 5 Material Design UI Kit

Product description


The most complex and innovative UI Kit Made by Creative Tim. Check our latest Freebie Bootstrap 5 UI Kit with a fresh, new design inspired by Google's Material Design 2.

Designed for those who like bold elements and beautiful websites, Material Kit 2 is ready to help you create stunning websites and web apps.

We created many examples for pages like Sign In, Contact Us, Profile, and so on. Just choose between a Basic Design, an illustration, or a cover and you are good to go!

Fully Coded Elements

Material Kit 2 is built with over 60 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using SASS files and classes.

You will save a lot of time going from prototyping to full-functional code because all elements are implemented.
This Freebie Bootstrap 5 Design System is coming with prebuilt design blocks, so the development process is seamless,
switching from our pages to the real website is very easy to be done.

View all components here.

Documentation built by Developers

Each element is well presented in very complex documentation.

You can read more about the documentation here.

Example Pages

If you want to get inspiration or just show something directly to your clients, you can jump-start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project.

View example pages here.

HELPFUL LINKS

Other versions

Bootstrap 4 - Material Kit BS4

Special thanks

During the development of this dashboard, we have used many existing resources from awesome developers. We want to thank them for providing their tools open source:

Bootstrap 5 - Open source front end framework

Popper.js - Kickass library used to manage poppers

Nepcha Analytics for the analytics tool. Nepcha is already integrated with this template. You can use it to gain insights into your sources of traffic.

Product certified by: Creative Tim
Material Kit 2 - Fully Coded and Responsive HTML5
Material Kit 2 - Sass Files for Professional Front End Developers
Material Kit 2 - Crafted with Bootstrap - the most popular Front End Framework
Material Kit 2 - Figma Files for Professional Designers
Downloads
188,180
Version
3.0.4
Changelog
Updated
10 months ago
Released
8 years ago
Star
Handcrafted Elements
60
Customized Plugins
2
Example Pages
4
Community Support
Documentation
Fully Responsive

Upgrade to PRO Version

Get more power with Material Kit 2 Pro. It has a lot more features compared to the free version. We hope you will create awesome websites/templates with this product!

What is in Demo? What is in PRO Version?
Elements 60 300
Plugins 2 5
Examples Pages 4 54
Full Coded
Documentation
SASS Files
Designer Files
Premium Support

We are here to help you!

283 Web Developers commented on this product

dhaval2013
  • downloaded
7 years ago

thanks to whole team of behind this project and made this.. I have little question Can i Change the default form input field Purple to Blue?... Thanks

alexpaduraru
  • owner

@dhaval2013 thank you for using our product and for the kind words. If you go to material-kit.css on line 1152 where is this class ".form-group.is-focused .form-control" you can change the linear-gradient colors with the colors that you want for the background-image property. Please let us know if everything was working fine. Best, Alex!
7 years ago

dhaval2013
  • downloaded
7 years ago

@axelut thank you for your fast reply and finally i change the color & it's working Perfect.

adrian.voinicu 7 years ago

Material Kit + Light Bootstrap Dashboard would be an absolute banger! Nice work guys!

alexpaduraru
  • owner

@adrian.voinicu glad that you like our products. Good luck with the development. Best, Alex!
7 years ago

owasi
  • downloaded
7 years ago

Love it ♥ Thanks Buddies

alexpaduraru
  • owner

You're welcome! :-)
7 years ago

georgius
  • downloaded
7 years ago

This is the best Material Design for Bootstrap solution! I found problem with material-kit.css and last version (4.17.37) of bootstrap-datetimepicker - no reaction on button click and no calendar popup. When I comment material-kit.css, normal behavior resored. Please, make your kit compatible with bootstrap-datetimepicker or offer any workaround

alexpaduraru
  • owner

@georgius thank you for using our product. Can you please send us an email with the archive with your bootstrap-datetimepicker integration or send us the link to your project to check on the live example and give you a quick fix? Best, Alex!
7 years ago

georgius
  • downloaded

please look at sample page: https://drive.google.com/file/d/0BzprZVk0q-wCWnJiSGJ0TkVkeFk/view?usp=sharing Just basic example of bootstrap-datetimepicker, zipped. Almost everything, except material Kit, from various CDN, latest versions. Thank you for helping
7 years ago

alexpaduraru
  • owner

@georgius thank you for the archive. We've checked and it looks like you need to add some extra properties for the DateTime Picker plugin ".bootstrap-datetimepicker-widget.dropdown-menu{ visibility: visible; opacity: 1; }". Add that at the end of material-kit.css. Please let us know if everything is working fine. Best, Alex!
7 years ago

georgius
  • downloaded

It really works! Thanks a lot!!!
7 years ago

pauldavid.lozano
  • downloaded
7 years ago

Great job! One question (two actually). 1) How do I make a responsive gallery here? 2) How do I make a contact form (not required to place PHP)?

alexpaduraru
  • owner

@pauldavid.lozano thank you for using our product. There is an example of "gallery" in the profile page, and that is responsive. For the contact form, you need a server-side language that will process the request, so we recommend you to use PHP. Best, Alex!
7 years ago

salkeen.khan 7 years ago

great work

alexpaduraru
  • owner

@salkeen.khan thank you! Glad that you like it :-)
7 years ago

edreesjalili
  • downloaded
7 years ago

So I am pretty new to Sass. If i wanted to create a new btn class called btn-secondary that just changes the background color of a button, any ideas on how i would accomplish this?

edreesjalili
  • downloaded

Actually i think i may have figured it out. I went into the mixins and added a clause for -secondary in the generic-variations mixin. Not sure if this was the proper way to do it because I am pretty sure I created (element)-secondary classes for any element that uses this mixin instead of just creating a single button.
7 years ago

alexpaduraru
  • owner

@edreesjalili thank you for using our product. Those mixins were made to follow the Bootstrap Structure (element)-[primary/info/success etc.] so yes it is generating for all the items. We've made some changes for the PRO version so it will be easier to generate independent buttons. After we release the PRO version we will add those changes in the Free version too. So you can keep your changes like that till we release the new update then you just use the more simple way to create different buttons. All the best, Alex!
7 years ago

hayden.a.carnegie
  • downloaded
7 years ago

Will this be updated for Bootstrap 4.0?

alexpaduraru
  • owner

@hayden.a.carnegie thank you for using our product. Yes, it will be updated to BS4 when they will release at least the Beta version. From what we read, the Alpha version is not good for production or live sites, so we don't to give to our users a product that is not stable yet. Best, Alex!
7 years ago

johnthuo1996
  • downloaded
7 years ago

love all your products...do you guys offer video tutorials for students

alexpaduraru
  • owner

@johnthuo1996 thank you for the kind words. At this moment we have video tutorials just for the Light Bootstrap Dashboard -> https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w in future we will release more video tutorials. Best, Alex!
7 years ago

You have to be logged in to post a comment. Login here.