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.

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

Examples
Bootstrap-material-design-bootstrap-elements-components
Download Package:
https://www.gittip.com/FezVrasta/
FezVrasta bootstrap-material-design master.zip

Material design for Bootstrap 3
This theme is a skin for Bootstrap, which means that can be used with any site built with the Bootstrap framework 3. With easy installation and customization thanks to the LESS/SASS files included and the custom themes colors ready to use. This skin is based on a material design and also extends the styles directly applied to Bootstrap files. There’s no overwritten rules or bloating CSS, making a lightweight skin as Boostrap is itself.
Install
Bower
$ bower install material_bootstrap_theme
Getting started
Include following files in head section


Browsers
IE10+, Opera, Safari, Yandex browser, Chrome, Firefox, Mobile Safari, Android
Download :
Material design for bootstrap. http://stas-melnikov.ru/material_bootstrap_theme/
Material Design Bootstrap 3. Today we review Material Design Bootstrap 3 theme. This theme is a new skin for your website, in case if your website is built with the Bootstrap framework 3. The theme doesn’t affect the Bootstrap core. For ease of use – LESS/SASS version is provided. The standard class names are not changed, for maximum compatibility with the framework.
Below we take a closer look at how you can use it.
Typography
In the theme we used 2 main fonts: Roboto light and Roboto regular. To display titles we selected the following variations that are presented in the figure below

Drop-down lists
All variations of the lists are customized and implemented in the theme. Pay attention to new classes : material_dropdown_btn, material_dropdown_menu and material_dropdown_menu_link. To use the list in your projects, you need to create the layout like below.


Dropdown



Form elements
As is known, the most important UI elements are form elements: text inputs, textarea, radioboxes, checkboxes, switch buttons etc. The Bootstrap provides a lot of options to represent them: single buttons, group of button, buttons with drop-down lists, various states of the buttons and so on.
Below you can see how the form elements look like in the theme.


Navigation elements
There are several ways to create navigation in Bootstrap 3: Navbar, pils, pagination, breadcrumbs. Below you can find the breadcrumb and the navbar:

$(document).ready(function () {
var height = $(window.frameElement).height(); // Calculate the window height
var minheight = $(window.frameElement).height(); // Calculate the window min-height
$(window.top.document).find('iframe').css("height", (height - 20) + "px"); // Calculated window height - header height + footer height + padding + margin , then you will get the remaining height for the main container
$(window.top.document).find('iframe').css("min-height", (minheight - 20) + "px"); // Calculated window minheight - header height + footer height + padding + margin , then you will get the remaining min-height for the main container
$(window.top.document).find('iframe').css("width", "100%");
});

// Resize Function
$(window).resize(function () {
var height = $(window.frameElement).height(); // Calculate the window height
var minheight = $(window.frameElement).height(); // Calculate the window min-height
$(window.top.document).find('iframe').css("height", (height - 20) + "px"); // Calculated window height - header height + footer height + padding + margin , then you will get the remaining height for the main container
$(window.top.document).find('iframe').css("min-height", (minheight - 20) + "px"); // Calculated window minheight - header height + footer height + padding + margin , then you will get the remaining min-height for the main container
});