Test de estilos CSS

Botones del tema

btn btn-gris
<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>

Margins and paddings

mar-top-30 mar-bottom-30 pad-top-15
mar-top-20 mar-bottom-40 pad-top-20
mar-top-10 mar-bottom-50 pad-top-25
<div class="row" style="border-color: black; border-width: 2px; border-style: solid;">
  <div class="col-md-4 mar-top-30 mar-bottom-30 pad-top-15" style="border-color: gray; border-width: 2px; border-style: solid;">mar-top-30 mar-bottom-30 pad-top-15</div>

  <div class="col-md-4 mar-top-20 mar-bottom-40 pad-top-20" style="border-color: gray; border-width: 2px; border-style: solid;">mar-top-20 mar-bottom-40 pad-top-20</div>

  <div class="col-md-4 mar-top-10 mar-bottom-50 pad-top-25" style="border-color: gray; border-width: 2px; border-style: solid;">mar-top-10 mar-bottom-50 pad-top-25</div>
</div>