Material Design for Bootstrap
Powerful and free Material Design UI KIT
400+ material UI elements, 600+ material icons, 74 CSS animations, SASS files, templates, tutorials and many more.
All fully responsive. All compatible with different browsers.
See it in action:
Choose among 400 predefined components. Each component is ready to use and fits perfectly with each other like LEGO bricks. Take, combine, enjoy!Live preview
To save your time we have combined our components and prepared thematic sections like blog listings, contact forms, pricing table and much more. Choose, combine and enjoy your website in less than a minute.Live preview
We are going further and giving to you ready to use templates! Use them as you like, as an inspiration, prototype or final product for your customers.Live preview
Google has designed a Material Design to make a web more beautiful and more user-friendly.
Twitter has created a Bootstrap to support you in faster and easier development of responsive and effective websites.
We present you a framework containing the best features of both of them - Material Design for Bootstrap.
Ready for a little magic?
Compare how easly MDB changes a Bootstrap elements
And it's only a beginning.
At your disposal are hundreds of beautiful components, templates, animations, effects and helpers.
Everything fully responsive, compatibile with different browsers and childishly easy to use
Bootstrap 4 or 3
Thanks to MDB you can take advantage of all feature of newest Bootstrap 4 or, if you prefer, use mature and still marvelous Bootstrap 3.
We give you detailed user-friendly documentation at your disposal. It will help you to implement your ideas easily.
Lots of tutorials
We care about development of our users. We have prepared numerous tutorials, which allow you to learn how to use MDB as well as other technologies.
Free for personal and commercial use
Our license is user friendly. Feel free to use MDB for both private as well as commercial projects.
400+ UI elements
Impressive collection of flexible components allows you to develop any project.
Hundreds of useful, scalable, vector icons at your disposal.
It doesn't matter whether your project will be displayed on desktop, laptop, tablet or mobile phone. MDB looks great on each screen.
70+ CSS animations
Neat and easy to use animations, which will increase interactivity of your project and delight your visitors.
Plenty of useful templates
Need inspiration? Use one of our predefined templates for free.
5 minutes, a few clicks and... done. You will be surprised at how easy it is.
Easy to use and customize
Using MDB is simple and pleasant. Components flexibility allows you deep customization. You will easily adjust each component to suit your needs.
..and even more:
Chrome, Firefox, IE, Safari, Opera, Microsoft Edge - MDB loves all browsers, all browsers love MDB.
Material Design for Bootstrap comes with both, compiled, ready to use libraries including all features as well as modules for CSS (SASS files) and JS. That allows you to create your custom library including only elements which you really use in your project.
MDB becomes better every month. We love the project and enhance as much as possible.
We really care about reliability. If you have any questions - do not hesitate to contact us.
Our society grows day by day. Visit our forum and check how it is to be a part of our family.
MDB fully suppports Flex Box. You can forget about alignment issues.
MDB is integrated with newest jQuery, therefore you can use all the newest features which comes along with it.
Arrenged and well documented .scss files can't wait until you compile them.
We are web developers, we really know which issues are the most annoying in our daily work. Helpers included in MDB will solve lot of them and make your life easiers.
Are you ready to start a 5 minute installation?
Learn more about MDB
Start our free, amazing tutorials, which will let you combine Material Design with Bootstrap and Wordpress.
This complete and easy guide will teach you how to create stunning, responsive website and apps.Start
This comprehensive tutorial contains everything you have to know about WordPress Theme development, starting with setting the environment, through WordPress installation and configuration, setting up theme construction, development including custom widgets and functions.Start
Learn more about Bootstrap and Material Design
In 2011, group of Twitter engineers decided to create Bootstrap as a inside solution for their programing problems. Technically, their plan was to create a tool without of certain code structure.
Each coder may have their own way of creating his artworks. This usually leads to some sort of uncertainties when another programmer, lets say a beginner, tries to read through the code. Because of that, Mark Otto and Jacob Thorton from Twitter designed Bootstrap - a way of convincing programmers to unify their patterns of writing the code, and avoid creating differences in the process. The benefits that Bootstrap brought to their daily work were simply invaluable.
When guys from Twitter realised its true potential, they have decided to release it as a open-source project. With the help of Github and thousands of other programmers, it took only few months to brand Bootstrap as most popular front-end development tool for creating responsive, mobile web projects.
So what exactly is Bootstrap?
Imagine it as a toolbox containing a series of useful functions and elements that might be helpful in the process of creating your own website.
It makes you able to choose from whatever tool you like, and you can be sure that none of these elements will collide with each other. It is like fitting puzzle pieces together, but in this case, every puzzle goes with another.
The tools you have imagined in our Bootstrap toolbox are basically HTML, CSS and JS all mixed together. Material Design for Bootstrap is the best example of how Bootstrap is constantly being under development and how much you can add to it with the help of design and functionality patterns from Google Material Design.
Material Design is a design language, originated from Google, which is intensively used in interfaces’ projects for the Android system. You may ask why it is used. The answer is simple – already a mature and organized tool which corresponds to the usability and legibility. Moreover, it is developing and changing dynamically. The result is the tool that may be a perfect match for screens, as well as the beginning point for unexperienced people in UI/UX designing.
The basis of MD are already well-established by website and UI/UX designers who have worked on it since a long time. What distinguishes it from other tools, is the fact you may use it in every kind of project you are currently working on, because it is easy to find recommended practices in each project set. The conventions place emphasis on:
Materials as a metaphor - in this context, it is a metaphor of space for sheet and ink. The real things that are used in this tool, are light and space, supported by unique space attributes that distinguish in digital forms field. The characteristics of MD are the shadows which are widespreaded. It reflects the behavior of real things that exist in reality
Meaning - the incentive of MD is designing for printing what reflects in very well designed grid, the importance of typography and colours.
Movement & Animation - MD not only supports a static form of printing design, but also includes the digital media, basing it on the laws of physics. It gives us the possibility to reconcile utility with aesthetics what is very important nowadays.
One of the most important metaphors in MD, is material which has its own position in space on Z axis, so we can tell if it is closer or farther from a user. The metaphor refers to so-called Elevation value. What is interesting, it is the fact this value simulates higher and lower positions in space by properly selected shading.
What else is important in Material Design attributes?
- Distinctive and well-chosen colours
- Simple and easy-to-use icons
- Graphics and images that are the additional benchmark for the content
- Simple, but at the same time elegant typography based on Roboto font