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:

Donate with Gratipay

Thanks 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!


Seems like you are using AdBlock to hide banners... Carbon ADS are quite nice and don't take much space, you may consider disabling it on this website.
This is the only AD on the entire website.

Thanks!

You can get this theme downloading the source from Bower:

bower install bootstrap-material-design

Getting Started

Download

Install with NPM - Coming Soon

You can also install and manage Material Bootstrap using NPM

npm install

Install with Bower

You can also install and manage Material Bootstrap using Bower

bower install bootstrap-material-design

Install with Meteor

You can also install and manage Material Bootstrap using Meteor

meteor add fezvrasta:bootstrap-material-design

What's included

Material Bootstrap is downloadable in a two forms. Material.css only supports the primary shades of the material color palette and Material-fullpalette.css supports every shade of the material color palette

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.

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Material Bootstrap. You'll see something like this:

Material/
                ├── css/
                │ ├── material.css
                │ ├── material.css.map
                │ ├── material.min.css
                │ ├── material.min.css.map
                │ ├── material-wfont.css
                │ ├── material-wfont.css.map
                │ ├── material-wfont.min.css
                │ ├── material-wfont.min.css.map
                │ ├── ripples
                │ ├── 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
                └── fonts/
                ├── Material-Design-Icons.eot
                ├── Material-Design-Icons.svg
                ├── Material-Design-Icons.ttf
                ├── Material-Design-Icons.woff
                └── ADD REMAINING GOOGLE FONT FILES HERE

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

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

Auto-update apps over wifi only

Remove all the searches you have ever performed

Sound

Touch sounds
Screen lock sound
Vibrate on touch

Checkbox

Keep Wi-Fi on during sleep

Wi-Fi frequency band

Toggle Button

Toggle Button Variations

Input

Input default sizing

This is a hint as a p.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 span.help-block.hint
Please enter a valid email address span.help-block.hint

Input - static labels form-group sizing

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

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

Input - floating labels input sizing

This is a hint
This is a hint

Input - Legacy

Textarea

Validation

Disabled

Hints

Styling

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

Material Color Samples

This is the list of all the supported color variations. Each color can be applied to every element that supports variations.

.btn-material-{{color}}
.navbar-material-{{color}}
.well-material-{{color}}
etc...

material.css includes only the primary color shades (red, pink, purple, deep-purple, etc...), if you want the entire palette please use material-fullpalette.css



















Button

Normal buttons

Flat buttons

Raised buttons

Custom button content

Floating Action Button

Regular

Mini

Dropdown

Simple dropdown

Dropdown



Dropdowns provided by Dropdown.js

Dialog

Simple Dialog

Dialog with header and footer

Shadow

Shadows

z = 0
z = 1
z = 2
z = 3
z = 4
z = 5

Animated

tap
tap