Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework.
Read more about Material Design for Bootstrap at the Github page .
If you want support the development of this project please consider donate something:
Donate with GratipayThanks to all the people that donate me weekly on Gratipay and all the ones which has donated on PayPal! You are great guys!
Would you like to use this theme for commercial projects? Visit MyWebExpression and contact me using the form on the bottom of the page. Thanks!
You can get this theme downloading the source from Bower:
bower install bootstrap-material-design
You can also install and manage Material Bootstrap using NPM
npm install
You can also install and manage Material Bootstrap using Bower
bower install bootstrap-material-design
Material Design for Bootstrap is downloadable in a two forms. First, as less/sass source files. Second, as compiled .css files.
This theme extends, styles, and modifies Bootstrap's elements and styles. Without Bootstrap this project will not display correctly. To install Bootstrap please go to Get Bootstrap
All JavaScript plugins require jQuery to be included.
If downloading instead of using Bower, once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Design for Bootstrap. You'll see something like this:
Material/
├── css/
│ ├── bootstrap-material-design.css
│ ├── bootstrap-material-design.css.map
│ ├── bootstrap-material-design.min.css
│ ├── bootstrap-material-design.min.css.map
│ ├── ripples.css.map
│ ├── ripples.min.css
│ ├── ripples.min.css.map
├── js/
│ ├── material.js
│ ├── material.min.js
│ ├── material.min.js.map
│ ├── ripples.js
│ ├── ripples.min.js
│ ├── ripples.min.js.map
Just copy the compiled CSS and JS files and the font files from the .zip and add them to your site.
Once copied you need to initialize the material javascript by adding the following javascript to your site,
$.material.init()
.form-group
Notify me about updates to apps or games that I've downloaded
Auto-update apps over wifi only
.form-group
Without a .form-group
, .help-block
always shows
Without a .form-group
, .help-block
sizing is the same as the label
.form-group
.form-group
This is a hint as a p.help-block.hint
span.help-block.hint
span.help-block.hint
Some helpful hint
A valid email contains an @ character