❤️ 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,167
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

elainerose1992
  • downloaded
4 years ago

Hello, Thanks for the Great Product. I am facing an issue integrating this bootstrap material kit in Angular project, I know you have material kit dashboard for angular but I wanted a UI kit. The Navbar component Hamburger icon doesn't work on click when using a smaller screen it doesn't open the side menu on clicking it nothing happens. I have integrated the JS correctly, It's the issue with this themes CSS file because when I remove the your theme CSS the regular bootstrap navbar works fine but after adding this theme's CSS even the regular bootstrap navbar stops working. Please help me I am stuck on this. Thanks in advance.

moldovanst
  • owner

Hello @elainerose1992 , thank you for using our products, please download and check the burger from Material Dashboard on Angular. Best, Stefan
4 years ago

tyrin-j.osimen
  • downloaded
4 years ago

Can I use this template in Angular 8 project? If so how? Is this dependent on jQuery?

moldovanst
  • owner

Hello @tyrin-j.osimen , thank you for using our products, unfortunately, we didn't developed this product on Angular yet, but you can do it by yourself. And yes, it is depending on jQuery. All the best, Stefan
4 years ago

fahadaftab
  • downloaded
4 years ago

Hi, I'm using this free version of yours, material kit. I will publish in the USA, will it be some kind of issue or copyright claim? I need to talk in detail. Can you please respond to me asap.

moldovanst
  • owner

Hello @fahadaftab , thank you for using our products, there is no problem publishing it since you will keep our credits in the CSS and JS files. Hope this infos helps you. All the best, Stefan
4 years ago

katsoltech
  • downloaded
4 years ago

You Guys are great, i dont have money to buy your product, but i will never stop sharing your site. thank you

moldovanst
  • owner

Hello @katsoltech , thank you for using our products, and for your good thoughts. Please check this page also: https://www.creative-tim.com/coupon Best, Stefan
4 years ago

nishinohinta
  • downloaded
4 years ago

Hi, I use 4 <div class="main main-raised"> in one page and 4 modals for each ( code follows). When I trigger a modal, a modal is hidden by other main-raised div sometime. How can I fix this? ``` <div class="modal fade" id="{{ org.id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Confirm Deletion</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <a class="btn btn-primary" href="{% url 'org_delete' org.id %}">Delete</a> </div> </div> </div> </div> ```

kokoskun
  • downloaded
4 years ago

Very Good

tiagorodrigues180985
  • downloaded
4 years ago

how to use! help please! navbar-toggler nav bar button

runcoded
  • downloaded
4 years ago

Downloaded :)

mark_radabaugh
  • downloaded
4 years ago

Does anyone know how to get the DateTimePicker to only use the date? I've looked on the GitHub documentation for the module, and the example they give doesn't work.

mark_radabaugh
  • downloaded
4 years ago

I can't get the modal to be centered on the screen. It's always seem to be float towards the bottom part of the screen. Is there any way to adjust so it comes up on the center of the screen?

moldovanst
  • owner

Hello @mark_radabaugh , thank you for using our products, the datepicker is a PRO component, so you can't change it to the only date in this product (please check the docs: https://demos.creative-tim.com/material-kit/docs/2.1/plugins/datetimepicker.html). Related to the modal component, we'll ask you to give us a link to your project to check for a solution because it looks good on the livePreview: https://prnt.sc/ptlmn6. All the best, Stefan
4 years ago

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