😍 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,465 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

farhad.aghababaei
  • downloaded
15 days ago

Hi, Please add <a href="http://demos.creative-tim.com/fresh-bootstrap-table">Fresh bootstrap table</a> to Material Kit. Thank you.

tomuh9
  • downloaded
12 days ago

It's YOUR page here http://demos.creative-tim.com/material-kit-pro/examples/ecommerce.html just thought you should know

axelut
  • owner

@tomuh9 thank you for the information. Wow! It seems something should be fixed there. We will look tomorrow and fix that. Keep in touch, Alex!
10 days ago

isanjayachar 12 days ago

I see lot of required components missing, like Modal, toasts, etc etc.. Any ETA for these?

axelut
  • owner

@isanjayachar we have the default Bootstrap Modals + 5 new design styles from them, please check them here: http://demos.creative-tim.com/material-kit-pro/index.html#javascriptComponents Hope this helps. Best, Alex!
10 days ago

isanjayachar

Sorry @axelut , that was my bad
6 days ago

isanjayachar 6 days ago

How do I combine Material Kit Pro and Material Angular Dashboard Pro?

axelut
  • owner

@isanjayachar 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 _this_ (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. Or you can use this to create also your _Blog_ (http://demos.creative-tim.com/material-kit-pro/examples/blog-posts.html), where you will keep in touch with your audience. You can also built your own pages with already made sections -> _http://demos.creative-tim.com/material-kit-pro/sections.html_ (http://demos.creative-tim.com/material-kit-pro/sections.html) 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 in 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 got 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 give you an idea about the usage of both products in the same web application/web presentation. Please let us know your status. Best, Alex
3 days ago

abinash.mohanty 5 days ago

Nice, how about including the .sketch files than Photoshop?

axelut
  • owner

@abinash.mohanty at this moment the Sketch version is available on our sister website: http://www.pixelsvibe.com/product/material-kit-pro. We are working on our internal system to make it available on Creative Tim too. Please let us know if we can help with any other details. Best, Alex!
3 days ago

farhad.aghababaei
  • downloaded
22 hours ago

Hi, Data-parallax have an issue, When scrolling through the page, The page-header moves below the screen

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