😍 Case Study: "How we built from scratch Light Bootstrap Dashboard" on one of the biggest publications on Medium: FreeCodeCamp.

Material Kit Pro

Premium Bootstrap UI Kit
· 4.90/5 (224 Reviews)

License

1,467 Downloads
166 Comments
Premium Support
Lifetime Updates
Release: 1 year ago
Update: 1 month ago
Icon html
Icon sass
Icon photoshop
Icon bootstrap

1000 Handcrafted Components

7 Customized Plugins

11 Example Pages

Bootstrap Based

Documentation

Fully Responsive

Product certified by: Creative Tim

Get Free Demo

Learn more about Material Kit Pro in the light demo version. It has features from the full version. We hope you will like this introduction to this product!

What is in Demo?
  • Components · 60
  • Plugins · 2
  • Examples Pages · 3
  • -
  • -
  • -
What is in PRO Version?
  • Components · 1000
  • Plugins · 7
  • Example Pages · 11
  • + Documentation
  • + SASS Files
  • + Photoshop Files
Get Free Demo
Opt mk thumbnail

We are here to help you!

166 Web Developers commented on this product

Report issue

cern.cerne 1 month ago

Help me please

jasondoggart
  • downloaded
1 month ago

Love this - thanks so much! Just a question - is the material dashboard designed to complement this kit? For example, if I download it will there be any conflicts between the styles in the two themes?

axelut
  • owner

Thank you for your interest in our products. Here is a quick presentation on how to use the products: 1. The Dashboard should be used for the Admin/CMS part of your website/startup. Here is where you control everything from the management part, where you see stats like http://demos.creative-tim.com/material-dashboard-pro/examples/dashboard.html about your products/users, where you edit/add/delete (http://demos.creative-tim.com/material-dashboard-pro/examples/tables/datatables.net.html) different items, etc. This is the control panel of your site. The Dashboard also includes the Login Page (http://demos.creative-tim.com/material-dashboard-pro/examples/pages/login.html), Register Page (http://demos.creative-tim.com/material-dashboard-pro/examples/pages/register.html) or Lock Screen Page (http://demos.creative-tim.com/material-dashboard-pro/examples/pages/lock.html) so you can use them to have the access to the Dashboard 2. The UI Kit should be used for the part where you present your business. You can create with the kit the Landing Page (http://demos.creative-tim.com/material-kit-pro/examples/landing-page.html) of your startup/website, the Contact Us Page (http://demos.creative-tim.com/material-kit-pro/examples/contact-us.html) the Pricing Page (http://demos.creative-tim.com/material-kit-pro/examples/pricing.html) the _About Us Page_ (http://demos.creative-tim.com/material-kit-pro/examples/about-us.html) etc. If you create a SaaS, probably your users will have access to the Dashboard too, so they can control some items from there too. But you still need the UI kit for the presentation pages of your business. In this way, you will have the same design in the presentation and also in the Dashboard. The basic idea is that you should keep the products separate and not try to combine them because you will load your page with too much CSS and Javascript which are not necessary for the same time. Your user will be either on a Landing Page or on the Admin Part. If you like for example 1 item from one product, like a Card, and it is not in the other product, you can check in the next example how to do that using the SCSS files. Just follow the next steps, for the FileUpload Example: 1. You can get to material-kit/assets/sass/material-kit/_fileupload.scss and put it in the same folder structure to material-dashboard. 2. Compile again the assets/sass/material-dashboard.scss SASS using Koala http://koala-app.com/ (make sure you set the output path to assets/css/material-kit.css). 3. Move the library for the file upload from material-kit/assets/js/jasny-bootstrap.min.js to the same folder in material-dashboard and then everything should work fine in the Dashboard. Hope this description helps. Best, Alex!
1 month ago

fair.man 1 month ago

Can I use it like a CDN? (<link href="http://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.css" rel="stylesheet">). Just i cant buy this now.

axelut
  • owner

@fair.man thank you for your interest in our product. Unfortunately, you cannot use it as a CDN because it is not a CDN. It is another server that we have and if it sees traffic from another source it will block it, so your website will not receive anything. Also, you cannot use it if you don't have a proper license. There is a message on top of the file which specifies this thing. Hope you understand the situation. We can offer you a coupon and you can pay in 2-3 steps while you get money. Is this ok for you? Best, Alex!
1 month ago

christian.friis 23 days ago

Does anyone have Sketch or Figma files for designers? Or does anyone knows if any templates are including Figma files?

pixelairport 23 days ago

Navigation over Content: Hi. I use material design pro and everytime i have the same problem. I just want to ask if there is already a class for my solution. I dont have a header and my navigation has this classes: navbar navbar-primary navbar-fixed-top. So it is not transparent. The main content begins under the navigation, that first lines are not visible. I can do something like that: <div class="main" style="margin-top:70px;"> ... but is that the right way? thx Norman

pixelairport

I found a solution. So if somebody has the same problem and want to have a fixed navigation at the top, just add navbar-static-top class to nav item. And then you have to add a fix into your stylesheet: .navbar { margin-bottom: 0px !important; } hope that helps
12 days ago

axelut
  • owner

@pixelairport thank you for the information and sorry for missing this comment. We will have a look and add your class/explanation in documentation, in case somebody else have the same issue. Best, Alex!
11 days ago

isanjayachar 21 days ago

Hello, Can I get a demo of this product? And I'm actually looking out for a custom licence for 2 of your templates (this + material design dashboard) we will be using it for a SaaS product

axelut
  • owner

@isanjayachar thank you for your interest in our products. Just added a trial order on your account. Please check it and let us know if everything is fine. For the SaaS project, you need Developer Licenses for the products. If you want 2 products I can give you 50% discount on the second one. Is this ok for you? Best, Alex!
20 days ago

farhad.aghababaei
  • downloaded
19 days ago

Hi, can you explain for me about "Moving Components", I don't understand how its work. Help me please. Thank you.

axelut
  • owner

@farhad.aghababaei thank you for using our product. Can you please let us know which components you want to use and where you got problems? Then we will help. Best, Alex!
18 days ago

agoglanian 19 days ago

I'm super interested in possibly utilizing this kit for a project that's bootstrap / react based but I want to know if you have sketch files in the works by chance? I'm comfortable enough with Photoshop for UI work but I personally very much prefer to work in Sketch. Is that coming by chance?

axelut
  • owner

@agoglanian thank you for your interest in working with our product. Yes, we have Sketch files but they were not included yet in our purchase flow. We can offer them after you get the HTML + PSD package. For React, we have a WIP Free version here: https://github.com/creativetimofficial/material-kit-react. We are still working on it, but hope it will help you start. Best, Alex!
18 days ago

isanjayachar 17 days ago

Just a thought - wouldn't it be better if we could get email templates using the same design standards? This will help us maintain a consistency everywhere

axelut
  • owner

@isanjayachar that sounds like a good idea. I will talk with the development team to see if this is something that we can create for further updates. What kind of email templates are you looking for? "Newsletter Articles, "receipt", "thank you"? Just as a curiosity. Best, Alex!
17 days ago

isanjayachar

@axelut - As this is a kit, I think we should either have all the above mentioned or you could give components like header, footer, body, tiles, etc. so we could probably have it placed as per the requirement PS: I recommend the second way as this can be helpful in many cases rather than have countable fixed templates
17 days ago

axelut
  • owner

@isanjayachar got it. Yes, that makes sense. Will check with my team and see what we can do. Thank you again for the feedback. Best, Alex!
15 days ago

tomuh9
  • downloaded
17 days ago

The product page card's don't rotate on hover on the live preview in Chrome :(

dragosct

@tomuh9 thank you for using our product. Please, can you tell us which version of the product do you have? Regards, Dragos
13 days ago

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

Why our customers appreciate us

Design Quality

The theme is very detailed and is good for most use cases.

Design Quality

Design Quality