Fork me on GitHub

Paper Elements

Material Design for Bootstrap

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.

If you like this project you can support me by donating something on Gratipay, starring this repository, or reporting bugs and ideas.

Read more about Material Design for Bootstrap at the Github page.


If you want support the development of this project please consider donate something:

Thanks to all the people that has donated on PayPal! You are great guys!



You can get this theme downloading the source from Bower or NPM:

bower install bootstrap-material-design
npm install bootstrap-material-design

Getting Started

Download

Install with NPM

You can also install and manage Material Bootstrap using NPM

npm install bootstrap-material-design

Install with Bower

You can also install and manage Material Bootstrap using Bower

bower install bootstrap-material-design

What's included

Material Design for Bootstrap is downloadable in a two forms. First, as less/sass source files. Second, as compiled .css files.

Required Frameworks

Bootstrap v3.0+

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

jQuery 1.9.1+

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()

Checkbox

Default inside a .form-group

Notify me about updates to apps or games that I've downloaded

Auto-update apps over wifi only

Horizontal form with column label variations

This shows the generic label variant.

This shows the control-label variant.

Default outside a .form-group

Without a .form-group, .help-block always shows

Without a .form-group, .help-block sizing is the same as the label

Radio buttons

Default outside a .form-group

Default inside a .form-group

Toggle Button

Input specification

Input label styles default sizing

This is a hint as a p.help-block.hint

This is a hint as a span.help-block.hint
This is a hint as a span.help-block.hint
This is a hint as a span.help-block.hint


Input - floating labels form-group sizing

Please enter a valid email address
Please enter a valid email address
Please enter a valid email address

Input - static labels form-group sizing

Please enter a valid email address
Please enter a valid email address
Please enter a valid email address

Input - no labels form-group sizing

Please enter a valid email address
Please enter a valid email address
Please enter a valid email address

Input - floating label feedback variants

Please enter a valid email address
Please enter a valid email address
Please enter a valid email address

Input - Legacy

Textarea

Validation

Disabled

Hints

Some helpful hint

A valid email contains an @ character

Styling

File Input

Navbar

Brand
Brand
Brand
Brand

Progress Bar

Basic

Contextual alternatives

Striped

Animated

Stacked

Slider

Music, video, games & other media

Notifications

Alarms

Sliders are powered by noUiSlider

Dropdown

Simple dropdown

Dropdown



Dropdowns provided by Dropdown.js

Dialog

Simple Dialog

Dialog with header and footer