Material Design for Bootstrap 4

Bootstrap Material Design UI KIT

The most popular UI KIT for building responsive, mobile-first websites and apps - free for personal & commercial use.


500+ material UI elements, 600+ material icons, 77+ CSS animations, 9 + useful plugins, SASS files, templates, tutorials and many more.

Get started Quick demo

- trusted by 3,000,000+ developers and designers

nasa - logo
amazon - logo
Nike - logo
ikea - logo
kpmg - logo
sony - logo
unity - logo
samsung - logo
airbus - logo
yahoo - logo
deloitte - logo
ge - logo

Watch our "5 min Quick Start" tutorial

Latest Bootstrap

Thanks to MDB you can take advantage of all features of the latest version of Bootstrap. MDB is updated & integrated every two weeks!

Detailed documentation

Easily implement your ideas with a detailed, user-friendly documentation at your disposal. You're able to adopt the quick, copy-paste approach or learn the insdide outs of every component.

Lots of tutorials

Never stop growing! MDB is full of basic web development tutorials as well as more advanced guides, from JS through React, Vue & Angular to Progressive Web Apps.


Not enough?

Free for personal and commercial use

Our license is user-friendly. Feel free to use MDB for both private as well as commercial projects.

500+ UI elements

Our impressive collection of beautiful, flexible components allows you to develop any kind of project.

600 icons

Hundreds of useful, scalable, vector icons at your disposal.

Fully responsive

It doesn't matter whether your project will be displayed on a desktop, laptop, tablet or mobile phone. MDB looks great on every type of screen.

77+ CSS animations

Neat and easy to use animations, which will increase the interactivity of your project and delight your visitors.

Gorgeous templates

Need inspiration? Use one of our predefined templates for free.

9+ useful plugins

Data tables, Iframes, email templates, treeview and other useful bootstrap addons that will help you save time & effort!

Easy to use & customize

Using MDB is straightforward and pleasant. Our flexible components allow deep customization. You will easily be able to adjust each component to suit your needs.


...and even more

Cross-browser compatibility

Chrome, Firefox, Safari, Opera, Microsoft Edge - MDB loves all modern browsers.

Frequent updates

MDB gets better with every update. We love the project and enhance as much as possible.

Active community

Our society grows day by day. Visit our forum and check how it is to be a part of our family.

jQuery v. 3.4.0

MDB is integrated with the latest version of jQuery. Therefore you can use all the latest features which come with it.

Modularity

MDB comes with compiled, ready to use libraries including the full feature set as well as modules for CSS (Sass files) and JS.

Technical support

We care about reliability. If you have any questions - do not hesitate to contact us.

Flexbox

MDB fully supports Flex Box. You can forget about the alignment issues.

SASS files

Arranged and well documented .scss files can't wait for you to compile them.

MDB Admin Dashboard displayed on iPad

Are you ready to start a 5-minute installation?



More free solutions


Tutorials & education


More Web Development Technologies

Note: This is the default Bootstrap version, based on jQuery. If you use other technologies have a look at:

MD Bootstrap Angular
Angular logo Learn more
MD Bootstrap React
React Logo Learn more
MD Bootstrap Vue
Vue logo Learn more

Learn more about Bootstrap and Material Design

Bootstrap


In 2011, a group of Twitter engineers decided to create Bootstrap as an internal solution for their programming problems. Technically, their plan was to create a tool without of certain code structure.

Each coder may have their own way of creating their artworks. This usually leads to some uncertainties when another programmer, let's 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 realized its true potential, they have decided to release it as an open-source project. With the help of Github and thousands of other programmers, it took only a few months to brand Bootstrap as the 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 website.
It makes you able to choose whatever tool you like, plus 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 fits with another.

The tools you have imagined in our Bootstrap toolbox are HTML, CSS, and JS all combined. Material Design for Bootstrap is the best example of how Bootstrap is constantly under development and how much you can add to it with the help of design and functionality patterns from Google Material Design.


Material Design


Material Design is a design language, originated from Google, which is intensively used in interface projects for the Android system. You may ask why it is used. The answer is simple -– it is already a mature and organized tool which corresponds to the usability and legibility. Moreover, it is developing and changing dynamically. The result is a tool that may be a perfect match for screens, as well as the starting point for inexperienced people in UI/UX designing.

The basis of MD is already well-established by website and UI/UX designers who have worked on it for 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 are distinguished in the digital forms field. The characteristics of MD are the shadows which are widespread. It reflects the behavior of real things that exist in reality

Meaning -- an incentive of MD is design printing, which reflects in a very well designed grid, the importance of typography and colors.

Movement & Animation -- MD not only supports a static form of printing design but also includes the digital media, based on the laws of physics. It gives us the possibility of reconciling utility with aesthetics, which is very important nowadays.

One of the most important metaphors in MD is a material which has its position in space on the Z-axis, so we can tell if it is closer or farther from a user. The metaphor refers to the so-called Elevation value. What is interesting, is the fact this value simulates higher and lower positions in space by appropriately selected shading.

What else is important in Material Design attributes?

- Distinctive and well-chosen colors

- Simple and easy-to-use icons

- Graphics and images that are an additional benchmark for the content

- Simple, but at the same time elegant typography based on the Roboto font