Test de estilos CSS [1]

Botones del tema

<a class="btn btn-gris" href="#">btn btn-gris</a>

btn btn-azul

<a class="btn btn-azul" href="#">btn btn-azul</a>

btn btn-rojo

<a class="btn btn-rojo" href="#">btn btn-rojo</a>

btn btn-amarillo

<a class="btn btn-amarillo" href="#">btn btn-amarillo</a>

btn btn-naranja

<a class="btn btn-naranja" href="#">btn btn-naranja</a>

btn btn-magenta

<a class="btn btn-magenta" href="#">btn btn-magenta</a>

btn btn-verde

<a class="btn btn-verde" href="#">btn btn-verde</a>

btn btn-morado

<a class="btn btn-morado" href="#">btn btn-morado</a>

Botones de Bootstrap

btn btn-primary

<a class="btn btn-primary" href="#">btn btn-primary</a>

btn btn-success

<a class="btn btn-success" href="#">btn btn-success</a>

btn btn-warning

<a class="btn btn-warning" href="#">btn btn-warning</a>

btn btn-danger

<a class="btn btn-danger" href="#">btn btn-danger</a>

btn btn-info

<a class="btn btn-info" href="#">btn btn-info</a>

btn btn-default

<a class="btn btn-default" href="#">btn btn-default</a>

Encabezados con color

h-verde

<h2 class="text-center h-verde">h-verde</h2>

h-azul

<h2 class="text-center h-azul">h-azul</h2>

h-morado

<h2 class="text-center h-morado">h-morado</h2>

h-magenta

<h2 class="text-center h-magenta">h-magenta</h2>

h-naranja

<h3 class="text-center h-naranja">h-naranja</h3>

h-amarillo

<h4 class="text-center h-amarillo">h-amarillo</h4>

h-rojo

<h5 class="text-center h-rojo">h-rojo</h5>

titulo-azul

<div class="col-md-3 mar-bottom-20 h-cen titulo-azul"><h5>titulo-azul</h5></div>

titulo-amarillo

<div class="col-md-3 mar-bottom-20 h-cen titulo-amarillo"><h4>titulo-amarillo</h4></div>

titulo-rojo

<div class="col-md-3 mar-bottom-20 h-cen titulo-rojo"><h5>titulo-rojo</h5></div>

titulo-naranja

<div class="col-md-3 mar-bottom-20 h-cen titulo-naranja"><h6>titulo-naranja</h6></div>

titulo-verde

<div class="col-md-3 mar-bottom-20 h-cen titulo-verde"><h1>titulo-verde</h1></div>

titulo-morado

<div class="col-md-3 mar-bottom-20 h-cen titulo-morado"><h2>titulo-morado</h2></div>

titulo-magenta

<div class="col-md-3 mar-bottom-20 h-cen titulo-magenta"><h3>titulo-magenta</h3></div>

titulo-gris

<div class="col-md-3 mar-bottom-20 h-cen titulo-gris"><h4>titulo-gris</h4></div>

Encabezados alineados

TITULO-DER

<div class="col-md-3 mar-bottom-20 titulo-der"><h3>TITULO-DER</h3></div>

TITULO-IZQ

<div class="col-md-3 mar-bottom-20 titulo-izq"<h3>>TITULO-IZQ</h3></div>

TITULO-CEN

<div class="col-md-3 mar-bottom-20 titulo-cen"><h3>TITULO-CEN</h3></div>

Tamaños de imágen

<div class="col-md-3 text-center mar-bottom-20"><img class="img-10" src="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>

<div class="col-md-3 text-center mar-bottom-20"><img class="img-30" src="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>

<div class="col-md-3 text-center mar-bottom-20"><img class="img-50" src="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>

<div class="col-md-3 text-center mar-bottom-20"><img class="img-70" src="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>

<div class="col-md-3 text-center mar-bottom-20"><img class="img-100" src="https://www.google.com.mx/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"></div>

Listas de color

list-naranja
list-naranja
list-naranja

list-verde
list-verde
list-verde

list-rojo
list-rojo
list-rojo

<div class="col-md-4 list-naranja text-center mar-bottom-20">
<ul>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-naranja </li>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-naranja </li>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-naranja </li>
</ul>
</div>

<div class="col-md-4 list-verde text-center mar-bottom-20 ">
<ul>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-verde </li>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-verde </li>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-verde </li>
</ul>
</div>

<div class="col-md-4 list-rojo text-center mar-bottom-20">
<ul>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-rojo </li>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-rojo </li>
  <li><i class="fa fa-caret-right" aria-hidden="true"></i> list-rojo </li>
</ul>
</div>