<div class="demo demo-primary">PRIMARY</div>
<div class="demo demo-success">SUCCESS</div>
<div class="demo demo-info">INFO</div>
<div class="demo demo-danger">DANGER</div>
<div class="demo demo-warning">WARNING</div>

<br><br>
<div class="demo demo-material-red">RED</div>
<div class="demo demo-material-pink">PINK</div>
<div class="demo demo-material-purple">PURPLE</div>
<div class="demo demo-material-deeppurple">DEEP PURPLE</div>
<div class="demo demo-material-indigo">INDIGO</div>
<div class="demo demo-material-lightblue">LIGHT BLUE</div>
<div class="demo demo-material-cyan">CYAN</div>
<div class="demo demo-material-teal">TEAL</div>
<div class="demo demo-material-lightgreen">LIGHT GREEN</div>
<div class="demo demo-material-lime">LIME</div>
<div class="demo demo-material-lightyellow">LIGHT YELLOW</div>
<div class="demo demo-material-orange">ORANGE</div>
<div class="demo demo-material-deeporange">DEEP ORANGE</div>
<div class="demo demo-material-grey">GREY</div>
<div class="demo demo-material-bluegrey">BLUE GREY</div>
<div class="demo demo-material-brown">BROWN</div>
<div class="demo demo-material-lightgrey">LIGHT GREY</div>

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic);

br { clear: both; }
.demo {
  width: 55px;
  height: 100px;
  float: left;
  font-family: Roboto;
  padding: 5px;
  color: #FFF;
  font-size: 10px;
  box-sizing: border-box;
}
.demo ,
.demo-default  {
  background-color: transparent;
}
.demo-primary  {
  background-color: #4285f4;
}
.demo-success  {
  background-color: #0f9d58;
}
.demo-info  {
  background-color: #3498db;
}
.demo-warning  {
  background-color: #ff5722;
}
.demo-danger  {
  background-color: #f44336;
}
.demo-material-red  {
  background-color: #f44336;
}
.demo-material-pink  {
  background-color: #e91e63;
}
.demo-material-purple  {
  background-color: #9c27b0;
}
.demo-material-deeppurple  {
  background-color: #673ab7;
}
.demo-material-indigo  {
  background-color: #3f51b5;
}
.demo-material-lightblue  {
  background-color: #03a9f4;
}
.demo-material-cyan  {
  background-color: #00bcd4;
}
.demo-material-teal  {
  background-color: #009688;
}
.demo-material-lightgreen  {
  background-color: #8bc34a;
}
.demo-material-lime  {
  background-color: #cddc39;
}
.demo-material-lightyellow  {
  background-color: #ffeb3b;
  color: #4D4D4D;
}
.demo-material-orange  {
  background-color: #ff9800;
}
.demo-material-deeporange  {
  background-color: #ff5722;
}
.demo-material-grey  {
  background-color: #9e9e9e;
}
.demo-material-bluegrey  {
  background-color: #607d8b;
}
.demo-material-brown  {
  background-color: #795548;
}
.demo-material-lightgrey  {
  background-color: #ececec;
  color: #4D4D4D;    
}

// Color palette of the Material Design for Bootstrap theme (https://github.com/FezVrasta/bootstrap-material-design)