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

Material Kit

Free Bootstrap UI Kit
· 4.90/5 (381 Reviews)

MIT License

51,838 Downloads
147 Comments
Regular Support
Lifetime Updates
Release: 1 year ago
Update: 9 months ago
Icon html
Icon sass
Icon bootstrap

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
Opt mkp thumbnail

We are here to help you!

147 Web Developers commented on this product

Report issue

alejandro.loayza
  • downloaded
7 months 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?.

axelut
  • owner

@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!
7 months ago

alejandro.loayza
  • downloaded
7 months ago

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

mymail.2093
  • downloaded
7 months 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
7 months ago

axelut
  • owner

@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?
7 months ago

caraelmichael
  • downloaded
7 months ago

such a great templates!

axelut
  • owner

@caraelmichael thank you! Glad that you like it!
7 months ago

victor.mongi
  • downloaded
7 months ago

Bootstrap version?

axelut
  • owner

@victor.mongi v3.3.6
7 months ago

mymail.2093
  • downloaded
7 months 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!

axelut
  • owner

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

mannygv145
  • downloaded
7 months ago

Superb temlates.. tq fr free

wilton.willdepaulo
  • downloaded
7 months ago

ertrert

rtipnis
  • downloaded
6 months 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.

axelut
  • owner

@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!
6 months 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
6 months ago

mfrcouto
  • downloaded
6 months 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

Hmm... what a creative design. Seems, the Big Bundle is the best thing for my development team.

Design Quality

Design Quality

Really nice to work with this kit.