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.

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

/* All Smartphones in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in landscape ----------- */
@media only screen 
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}

/* All Smartphones in portrait ----------- */
@media only screen 
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}

/***** ANDROID DEVICES *****/

/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}

/* Android(Samsung Galaxy) in Landscape 685 X  380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}

/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}

/***** ALL GENERATION IPADS *****/

/* iPads in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */  
}

/* iPad in landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}

/* iPad in portrait----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}



/***** Retina IPAD 3 & 4*****/

/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}

/* Retina iPad 3 & 4 in landscape----------- */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}




/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/

/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in landscape ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1)  {
/* YOUR STYLE GOES HERE */
}

/* iPad 1 & 2 in portrait ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* YOUR STYLE GOES HERE */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}

/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}

About Responsive Web Page

About Media Queries

Creating Responsive Web Page

About @media all

A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.

About @media screen and (min-width: 1401px)

About @media screen and (max-width: 1401px)

About @media screen and (min-width: 1200px) and (max-width: 1400px)

Adding meta tag to render it properly in mobile phones