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>

Noticias

Inaugura Sedeso la Semana Estatal de la Cultura Indígena en Tetelcingo

Inaugura Sedeso la Semana Estatal de la Cultura Indígena en Tetelcingo
Fomenta Gobierno de Cuauhtémoc Blanco el emprendimiento mediante capacitaciones y capital semilla

Fomenta Gobierno de Cuauhtémoc Blanco el emprendimiento mediante capacitaciones y capital semilla
Apertura Sedeso registro para Mujeres y Hombres de 10

Apertura Sedeso registro para Mujeres y Hombres de 10
Promueve Sedeso trabajo coordinado y transversal a favor de las comunidades indígenas

Promueve Sedeso trabajo coordinado y transversal a favor de las comunidades indígenas
Planifica Sedeso edición 2024 de Mujeres y Hombres de 10

Planifica Sedeso edición 2024 de Mujeres y Hombres de 10

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>