Material Kit

Free Bootstrap 4 UI Kit
· 4.90/5 (633 Reviews)

MIT License

80,613 Downloads
218 Comments
Regular Support
Lifetime Updates
Release: 2 years ago
Update: 16 days ago

60 Handcrafted Components

2 Customized Plugins

3 Example Pages

Product certified by: Creative Tim

Upgrade to PRO Version

Get more power with Material Kit 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?
  • Components · 60
  • Plugins · 2
  • Examples Pages · 3
  • -
  • -
  • -
What is in PRO Version?
  • Components · 1000
  • Plugins · 7
  • Example Pages · 11
  • + Documentation
  • + SASS Files
  • + Photoshop Files
Upgrade to PRO

We are here to help you!

218 Web Developers commented on this product

Report issue

alejandro.loayza
  • downloaded
1 year ago

Hi there. Great Job with this template, and thank you. I had a problem: paralax effect doesn't work if i don't include id="sliderRegular" and id="sliderDouble" inside the div tag. That's rare, isn't?.

alexpaduraru
  • downloaded

@alejandro.loayza thank you for using our product. It seems the sliders are breaking the javascript, so if you don't have them in your file go to assets/js/material-kit.js and remove the "initSliders" functions. Also, remove the call of "materialKit.initSliders();" from the index.html then everything will be fine. Best, Alex!
1 year ago

alejandro.loayza
  • downloaded
1 year ago

Thank you to answer so fast. I'm glad with your team work.

mymail.2093
  • downloaded
1 year ago

Hello, I just tried the kit on an iphone 7 and the ripple effect does not work. On android everything works as expected. Thank you

mymail.2093
  • downloaded

I have the same problem as this guy here: https://github.com/FezVrasta/bootstrap-material-design/issues/353#issuecomment-72662078
1 year ago

alexpaduraru
  • downloaded

@mymail.2093 thank you for using our product and for pointing out. The repo that you sent is the repo for the UI kit that we used as the base of Material Kit and it is a repo which is not owned by us. We will do some further checks to see what can be a solution for that. Did you try to test what the guys wrote in that issue? Fixing the ":" problem in the javascript?
1 year ago

caraelmichael
  • downloaded
1 year ago

such a great templates!

alexpaduraru
  • downloaded

@caraelmichael thank you! Glad that you like it!
1 year ago

victor.mongi
  • downloaded
1 year ago

Bootstrap version?

alexpaduraru
  • downloaded

@victor.mongi v3.3.6
1 year ago

mymail.2093
  • downloaded
1 year ago

@axelut the material-kit.min.js have ":" on -moz-transform and -webkit-transform but the ripples don't work on the iphone and probably all apple devices. Probably that's because you are not using the latest bootstrap-material-design libraries. Anyways thank you for your attention!

alexpaduraru
  • downloaded

@mymail.2093 thank you for the information. We will check that and update to the latest bootstrap-material-design. Best, Alex!
1 year ago

mannygv145
  • downloaded
1 year ago

Superb temlates.. tq fr free

wilton.willdepaulo
  • downloaded
1 year ago

ertrert

rtipnis
  • downloaded
1 year ago

Hi - I want to be able to switch / toggle my brand image when the navigation scroll occurs (just the way the nav items need to be toggled when the scrolling occurs) - so that it can change the color based on the background. Is this provided/configurable? If not, I will have to write some JS to manage this myself. Another question is - it'll be great if this forum is searchable - as I might be repeating my questions here. Thanks.

alexpaduraru
  • downloaded

@rtipnis thank you for using our product. What you want to achieve is not implemented but can be created only with CSS, there is a navbar-transparent class which is added/removed from the navbar after you scroll, so you can add 2 images with 2 classes (ex: class-a class-b), and you will have something like .navbar .class-a {display:block}; .navbar .class-b {display:none}; .navbar-transparent .class-a{display:none}; .navbar-transparent .class-b {display:block} and it will change the images automatically. Makes sense? We will think at a better way to make the collaboration on the comments easier and possible adding a search :D Best, Alex!
1 year ago

rtipnis
  • downloaded

Hi @axelut, I solved this by adding a couple of lines in materialKit.checkScrollForTransparentNavbar() function - by basically using jQuery to switch URLs using $('.<classname>').attr('src', <url>); Thanks
1 year ago

mfrcouto
  • downloaded
1 year ago

Nice job c-Tim! Were loved ur themes!

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

Why our customers appreciate us

Design Quality

bagus bang

Design Quality

Excellent design...Loved it...Built with class, simplicity and style...It has got everything...

Design Quality

The components are greatly customizable and the look is premium. Was thinking if I could get some discount to buy the pro version of this material design.