The less version can be found here
This theme is in early development and is not ready for production.
Check out the demo at this link.
bower install bootstrap-material-design-sass --save
Navigate to the
template/ folder in this repository, and you will see the
index.html file, which has the CSS include statements, in the
head section and the JS includes just before
body section closes.
You need to copy the
material/ folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.
Currently supported elements:
If you like the original project you may support it by donating something on Gittip
Please see the contrib file.
Material Design for Bootstrap provides some additional stuff to get the best from Material Design.
There are 17 additional color variations (in addition to the classic 4 variations) for buttons, inputs, checkboxes, radios, alerts, navbars, tabs, labels, paginations, progress bars and more.
They can be used by adding the class suffix
-material-color to the desired element and replacing
color with the desired one.
<button class="btn btn-material-deeppurple">Deep purple button</button>
These colors are taken from the Material Design color palette and are reported below:
.btn-flat to a button to make it flat, without shadows.
.btn-raised to a button to add a permanent shadow to it.
.floating-label to an input field with a
placeholder to transform the placeholder in a floating label.
Remember to use the proper HTML markup to get radio and checkboxes styled correctly (choose between radio or checkbox):
<div class="radio/checkbox radio-primary"> <label> <input type="radio/checkbox" checked> Option one is this </label> </div>
Material Design for Bootstrap includes 490 original Material Design icons! These icons are extracted from the original Google sources and are licensed under the BSD license. They are provided as an iconic and easy to use font.
Variations are available for every icon, including the original Bootstrap icons.
The syntax to add a Material icon is:
<i class="icon icon-material-favorite"></i>
Material Design for Bootstrap comes with styling support for various external scripts. At the moment only two scripts are supported but others will come:
Create snackbars and toasts with SnackbarJS plugin. The default toast style is the squared one (snackbar style). If you like to use the rounded style (toast style), please add the
toast class to the
style option of SnackbarJS.
Make cross-browser sliders and get them styled with Material Design thanks to the support provided by this theme. Read more about noUiSlider here
Currently Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but it may work.