BLACK FRIDAY 90% OFF. Interested in all of our Premium Products? Check the biggest sale of 2018!

Material Kit Pro

Premium Bootstrap 4 UI Kit
· 4.90/5 (345 Reviews)

License

2,660 Downloads
127 Comments
Premium Support
6 months Updates
Release: 2 years ago
Update: 4 months ago

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

We are here to help you!

127 Web Developers commented on this product

Report issue

hhguy 7 months ago

do you have plan to make it support react?

dragosct
  • downloaded

Hi, @hhguy ! Thank you for using our product. Yes, of course we have in our plan to migrate the product also on React framework, but I can't tell you for the moment the exact date of the release. Regards, Dragos
7 months ago

matevisky
  • downloaded
7 months ago

I would like to use a mobile.css version. Is there any way to compile only the mobil version of the library, than I can use like this: <link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/> Thank you for your help

dragosct
  • downloaded

Hi, @matevisky ! Thank you for using our product. Please, can you be more specific about what you want? Regards, Dragos
7 months ago

matevisky
  • downloaded

Sure, I would like to optimize my pagespeed. I would like to split my css into mobile.css and all.css In the mobile.css I would like to see all the media directive for max-device-width: 480px, and I do not want to see anything else Is it possible to split it? Otherwise we are getting a very poor pagespeed score for this template
7 months ago

dragosct
  • downloaded

Hi, @matevisky ! Now I understand what you said. I'm just curious why do you have a page speed score very poor, did you have multiple images or videos on your project? Regards, Dragos
7 months ago

paul_
  • downloaded
7 months ago

Hey there, awesome theme! Got a question - is already known a way to use smooth-scroll for the horizontal navbar? Thanks.

dragosct
  • downloaded

Hi! Thank you for using our product. Please, can you be more specific? Regards, Dragos
7 months ago

paul_
  • downloaded

Hello, Dragos, if I refer to a #section in the vertical navigation, then smooth-scroll to the section is activated. If I refer to a #section in the horizontal navigation, then no smooth-scroll is activated.
7 months ago

dragosct
  • downloaded

Hi! Please, can you show us an example of that feature? Regards, Dragos
7 months ago

rushter777
  • downloaded
7 months ago

why does it seem that the scss files are interfering with things. Do the scss files override everything? We keep getting strange messages in Chrome console that scss is overriding our material-kit.css file. Is that supposed to happen or are we doing something wrong?

dragosct
  • downloaded

Hi! Please, can you be more specific about the problem? Regards, Dragos
7 months ago

w3codeone
  • downloaded
7 months ago

The Kit is really nice. However, the navbar-toggler-icon is ugly! How can I change it with custom styles? I have tried a lot, even with !important

dragosct
  • downloaded

Hi, @w3codeone ! Thank you for using our product and for you kind words. You can go to the scss in assets/scss/core/_navbar.scss and there you can search for .navbar-toggler and there you can style how you want. Regards, Dragos
7 months ago

rushter777
  • downloaded
7 months ago

OK I will try - here goes. We set up our page based on your template but somehow in our Chrome inspect window _navbar.scss is overriding any styles we change in our own supplemental css file. Even when we take out our supplemental css file the same thing happens. Below is your template file with only a navbar and a link to our css file and it will not work... <!doctype html> <html lang="en"> <head>

rushter777
  • downloaded
7 months ago

Can't leave more than so many characters on your replies here - where can I send you a sample html page that does not work???????

rushter777
  • downloaded
7 months ago

Please go to this page - https://englishmenusavailable.com/mk2/template.html and then inspect it in Chrome and you will see that it is pulling the css info from all of the _navbar.scss _grid.scss etc. Why is this happening? It should not be taking any info except from the actual material-kit.css file - should it??????

rushter777
  • downloaded
7 months ago

Please see this screen cap - https://www.englishmenusavailable.com/scss-errors.png If you notice on the right hand side it is loading rema-styles.css and then canceling out that file with the _navbar.scss file. After checking the same thing on your demo pages this does not happen at all. We just want to know why - did we mess something up?

dragosct
  • downloaded

Hi, @rushter777 ! This is happening because you try to override something with !important. To override this you must put also !important on your scss code, but you don't have to put !important on every property only on that properties that have !important in our scss. Regards, Dragos
7 months ago

rushter777
  • downloaded
7 months ago

I never use the !important tag in anything. I haven't changed any of your css or js or anything.

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