# Material Design for Bootstrap

# 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 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`

Notifications

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

Auto-updates

Auto-update apps over wifi only

## Horizontal form with column label variations

Touch sounds

This shows the generic label variant.

Vibrate on touch

This shows the `control-label` variant.

## Default outside a `.form-group`

Notifications

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

Auto-updates

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

# Radio buttons

## Default outside a `.form-group`

Always
Only when plugged in

## Default inside a `.form-group`

Always
Only when plugged in

# Toggle Button

Wi-Fi
Bluetooth

# Toggle Button Variations

Wi-Fi
Bluetooth

# Input specification

## Input label styles default sizing

label-static

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

label-floating This is a hint as a `span.help-block.hint`
label-placeholder This is a hint as a `span.help-block.hint`
Column label
This is a hint as a `span.help-block.hint`

## Input - floating labels form-group sizing

Email address form-group-sm Please enter a valid email address
Email address default size Please enter a valid email address
Email address form-group-lg Please enter a valid email address

## Input - static labels form-group sizing

Email address form-group-sm Please enter a valid email address
Email address default size Please enter a valid email address
Email address form-group-lg Please enter a valid email address

## Input - no labels form-group sizing

Email address form-group-sm Please enter a valid email address
Email address default size Please enter a valid email address
Email address form-group-lg Please enter a valid email address

## Input - floating label feedback variants

Email address has-success Please enter a valid email address
Email address has-warning Please enter a valid email address
Email address has-error Please enter a valid email address

## Input - Legacy

## Textarea

Floating label

## Validation

email
number

## Disabled

email
number

## Hints

label

Some helpful hint

label

A valid email contains an @ character

## Styling

floating label

# File Input

Static label

# Progress Bar

## Basic

## Contextual alternatives

## Striped

## Animated

## Stacked

# Slider

## Music, video, games & other media

## Notifications

## Alarms

Sliders are powered by noUiSlider

# Dropdown

## Simple dropdown

# Dialog

## Simple Dialog

## Dialog with header and footer

E dolore commodo, id anim aute sint cupidatat eu est anim tamen ad possumus, legam officia firmissimum. Eram deserunt domesticarum, iis ita praetermissum, nam aliquip quo probant, incididunt et occaecat an nam enim exquisitaque a nescius velit admodum, non ad cohaerescant, probant o nulla tempor. Aute aut te quis arbitror ubi ne aliqua consequat aliquip. Ad sunt laborum senserit, de do quem possumus. Sint tractavissent cupidatat aute possumus ita elit ad cupidatat. Arbitror ab fabulas o eu e veniam pariatur. Non voluptate comprehenderit ad nisi id voluptate. Quis distinguantur quibusdam quae mentitum o si minim illum nisi mandaremus.

#### Dialog

Fore aut non quem incididunt, varias reprehenderit deserunt quem offendit, cillum proident ne reprehenderit, quem ad laborum, quo possumus praetermissum, si ne illustriora, hic appellat coniunctione, do labore aliqua quo probant. In probant voluptatibus quo mentitum est laboris. Quorum mandaremus graviterque. Mentitum id velit, dolor aut litteris, ea varias illustriora, ita commodo ita ingeniis, iis nulla appellat incurreret, aut irure amet summis pariatur ita ubi quis dolore veniam proident, consequat sed ingeniis.

#### Source Code