Servicios

Manual de estilos CSS del portal institucional de la Universidad Central, código basado en bootstrap 4.0.
https://getbootstrap.com/docs/4.0/getting-started/introduction/

Paleta de colores

1. PALETA DE COLORES PRINCIPALES

Colores
institucionales
Pantone
(impresión)
CMYK
(impresión)
RGB
(pantalla)
Web
  Pantone
378
C: 34
M: 0
Y: 100
K: 60
R: 99
G: 111
B: 7
#636F07
  Pantone
484
C: 0
M: 95
Y: 100
K: 29
R: 177
G: 31
B: 22
#B11F16
  Pantone
Negro
C: 0
M: 0
Y: 0
K: 100
R: 26
G: 23
B: 27
#1A171B
  Pantone
384
C: 18
M: 0
Y: 100
K: 31
R: 172
G: 170
B: 0
#ACAA00
  Pantone
468
C: 6
M: 9
Y: 23
K: 0
R: 243
G: 231
B: 204
#F3E7CC

2. PALETA DE COLORES SECUNDARIOS

Color
complementarios
Pantone
(impresión)
CMYK
(impresión)
RGB
(pantalla)
Web
  Pantone
300
C: 100
M: 70
Y: 0
K: 0
R: 0
G: 81
B: 158
#00519E
  Pantone
294
C: 100
M: 100
Y: 30
K: 30
R: 18
G: 34
B: 83
#122253
  Pantone
108
C: 0
M: 20
Y: 90
K: 0
R: 254
G: 205
B: 26
#FECD1A
  Pantone
Orange 021
C: 0
M: 75
Y: 100
K: 0
R: 233
G: 93
B: 15
#E95D0F
  Pantone
476
C: 30
M: 50
Y: 100
K: 75
R: 75
G: 54
B: 11
#4B360B
  Pantone
3292
C: 80
M: 40
Y: 60
K: 30
R: 42
G: 97
B: 85
#2A6155
  Pantone
325
C: 60
M: 0
Y: 35
K: 0
R: 106
G: 191
B: 178
#6ABFB2

Componentes para la diagramación

3. TIPOGRAFIA EN TÍTULOS

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

 

4. LEAD

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">
  Texto...
</p>

 

5. ETIQUETAS DE TEXTO EN LÍNEA

5.1 TEXTO DESTACADO

You can use the mark tag to highlight text.


<mark>Texto destacado... </mark>
5.2 TEXTO TACHADO

This line of text is meant to be treated as no longer accurate.


<del>Texto tachado... </del>
5.3 TEXTO SUBRAYADO

This line of text is meant to be treated as an addition to the document.


<ins>Texto subrayado... </ins>
5.4 TEXTO PIE DE NOTA

This line of text is meant to be treated as fine print.


<small>Texto pie de nota... </small>
5.5 TEXTO NEGRILLA

This line rendered as bold text.


<strong>Texto en negrilla... </strong>
5.6 TEXTO INCLINADO (ITALICA)

This line rendered as italicized text.


<em>Texto inclinado... </em>

6. CITAS EN BLOQUE (Blockquotes)

6.1 CITA BLOQUE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere.

<blockquote class="quote">
  <p>Texto... </p>
</blockquote>
6.2 CITA BLOQUE CON AUTOR

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ipsum dolor sit amet, consectetur adipiscing elit Integer posuere.

— Autor Título...

<blockquote class="quote-con-autor">
  <p >Texto... </p>
  <footer class="blockquote-autor">&#8212; Autor... <cite title="Source Title">Título... </cite></footer>
</blockquote>

7. LISTADO (Viñetas)

7.1 LISTA TIPO 1
  • Lorem ipsum dolor sit amet
    • Phasellus iaculis
    • Consectetur adipiscing
      • Purus sodales
      • Integer posuere
<ul class="list-unstyled">
 <li>Primer nivel</li>
  <ul>
   <li>Segundo nivel
    <ul>
     <li>Tercer nivel</li>
    </ul>
   </li>
 </ul>
</ul>
7.2 LISTA TIPO 2
  • Lorem ipsum dolor sit amet.
  • Integer posuere erat a ipsum
    • Phasellus iaculis
    • Consectetur adipiscing
      • Purus sodales
      • Consectetur adipiscing
<ul>
 <li>Primer nivel</li>
  <ul>
   <li>Segundo nivel
    <ul>
     <li>Tercer nivel</li>
    </ul>
   </li>
 </ul>
</ul>
7.1 LISTA TIPO 3
  1. Lorem ipsum dolor sit amet.
    1. Phasellus iaculis
    2. Consectetur adipiscing
      1. Purus sodales
      2. Consectetur adipiscing
<ol>
 <l>Primer nivel</li>
  <ol>
   <li>Segundo nivel
    <ol>
     <li>Tercer nivel</li>
    </ol>
   </li>
 </ol>
</ol>

8. Descripción

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
<dl class="row descripcion">
  <dt class="col-sm-3">Descripción: </dt>
  <dd class="col-sm-9">Texto... </dd>

  <dt class="col-sm-3">Descripción parrafo: </dt>
  <dd class="col-sm-9">
    <p>Texto... </p>
    <p>Texto... </p>
  </dd>

  <dt class="col-sm-3 text-truncate">Texto contínuo: </dt>
  <dd class="col-sm-9">Texto... </dd>

  <dt class="col-sm-3">Texto anidado: </dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Descripción; </dt>
      <dd class="col-sm-8">Texto... </dd>
    </dl>
  </dd>
</dl>

9. ALERTAS

9.1 ALERTA INFORMACIÓN DE NIVEL 1
This is a primary alert—check it out!

<div class="alert alert-primary" role="alert">
  Texto...
</div>
9.2 ALERTA INFORMACIÓN DE NIVEL 2
This is a secondary alert—check it out!

<div class="alert alert-secondary" role="alert">
  Texto...
</div>
9.3 ALERTA DE INFORMACIÓN
This is a success alert—check it out!

<div class="alert alert-success" role="alert">
  Texto...
</div>
9.4 ALERTA INFORMACIÓN URGENTE
This is a danger alert—check it out!

<div class="alert alert-danger" role="alert">
  Texto...
</div>
9.5 ALERTA INFORMACIÓN DE ADVERTENCIA
This is a warning alert—check it out!

<div class="alert alert-warning" role="alert">
  Texto...
</div>
9.6 ALERTA INFORMACIÓN DE INTERÉS
This is a info alert—check it out!

<div class="alert alert-info" role="alert">
  Texto...
</div>
9.7 ALERTA INFORMACIÓN FONDO BLANCO
This is a light alert—check it out!

<div class="alert alert-light" role="alert">
  Texto...
</div>
9.8 ALERTA INFORMACIÓN FONDO GRIS
This is a dark alert—check it out!

<div class="alert alert-dark" role="alert">
  Texto...
</div>
9.9 ALERTA INFORMACIÓN FONDO VERDE CLARO
This is a LightGreen alert—check it out!

<div class="alert alert-cuarta" role="alert">
  Texto...
</div>
9.10 ALERTA INFORMACIÓN FONDO GRIS PLATA
This is a Silver alert—check it out!

<div class="alert alert-quinta" role="alert">
  Texto...
</div>
9.11 ALERTA INFORMACIÓN FONDO AMARILLO CAQUI
This is a Khaki alert—check it out!

<div class="alert alert-sexta" role="alert">
  Texto...
</div>
9.12 ALERTA INFORMACIÓN FONDO AMARILLO MOCASÍN
This is a Moccasin alert—check it out!

<div class="alert alert-septima" role="alert">
  Texto...
</div>
9.13 ALERTA INFORMACIÓN CON ENLACE (link)
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.
Información importante con enlace al portal institucional de la Universidad Central.

<div class="alert alert-primary" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-secondary" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-success" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-danger" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-warning" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-info" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-light" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-dark" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-cuarta" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-quinta" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-sexta" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
<div class="alert alert-septima" role="alert">
  Texto <a href="#" class="alert-link">enlace</a> texto...
</div>
9.14 Alerta con cierre
Holy guacamole! You should check in on some of those fields below.
Recuerda llenar todos los campos del formulario.
Recuerda llenar todos los campos del formulario.
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

10. Botones

<a class="btn boton_descargar" href="#">
<span class="fa fa-download">&nbsp;</span>
  Descargar
</a>
<a class="btn boton_mas_informacion" href="#">
<span class="fa fa-plus">&nbsp;</span>
   Más información
</a>
<a class="btn boton_registrese" href="#">
<span class="fa fa-pencil">&nbsp;</span>
   Registrese aquí
</a>
<a class="btn boton-reproducir" href="#">
<span class="fa fa-play">&nbsp;</span>
   Reproducir
</a>
<a class="btn btn-comodin1" href="#">
<span class="fa fa-angle-double-left">&nbsp;</span>
   Comodín 1
</a>
<a class="btn btn-comodin2" href="#">
<span class="fa fa-angle-double-right">&nbsp;</span>
   Comodín 2
</a>
<a class="btn btn-comodin2" href="#">
<span class="fa fa-angle-double-down">&nbsp;</span>
   Comodín 3
</a>
<a class="btn btn-comodin4" href="#">
<span class="fa fa-angle-double-left">&nbsp;</span>
   Comodín 4
</a>

<a class="btn btn-primary boton-tipo-1" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-2" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-3" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-4" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-5" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-6" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-7" href="#">
   boton
</a>
<a class="btn btn-primary boton-tipo-8" href="#">
   boton
</a>

<button class="btn btn-outline-primary btn-outline-tipo-1" type="button">
   boton
</button>
<button class="btn btn-outline-secondary" type="button">
   boton
</button>
<button class="btn btn-outline-success" type="button">
   boton
</button>
<button class="btn btn-outline-danger" type="button">
   boton
</button>
<button class="btn btn-outline-warning" type="button">
   boton
</button>
<button class="btn btn-outline-info" type="button">
   boton
</button>

11. Destacados

Información destacada naranja

With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.

  Más información

Información destacada azul

With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.

  Regístrese aquí

 

Información destacada verde

With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.

  Descargar

Información destacada para reproducir

With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content. With supporting text below as a natural lead-in to additional content.

  Reproducir

 

Destacado Texto

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Acordeon

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div id="accordion">
<div class="card">
<div class="cabezote-acordeon" id="headingOne">
<h5 class="mb-0">
<button aria-controls="collapseOne" aria-expanded="true" class="btn btn-acordeon collapsed" data-target="collapseOne" data-toggle="collapse">
Titulo acordeon
<span class="fa fa-angle-double-down">&nbsp;</span>
</button>
</h5>
</div>
<div aria-labelledby="headingOne" class="collapse show" data-parent="#accordion" id="collapseOne">
<div class="cuerpo-acordeon">Texto acordeon...</div>
</div>
</div>
<div class="card">
<div class="cabezote-acordeon" id="headingTwo">
<h5 class="mb-0">
<button aria-controls="collapseTwo" aria-expanded="false" class="btn btn-acordeon collapsed" data-target="collapseTwo" data-toggle="collapse">
Titulo acordeon 2
<span class="fa fa-angle-double-down">&nbsp;</span>
</button>
</h5>
</div>
<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordion" id="collapseTwo">
<div class="cuerpo-acordeon">Texto acordeon 2...</div>
</div>
</div>
<div class="card">
<div class="cabezote-acordeon" id="headingThree">
<h5 class="mb-0">
<button aria-controls="collapseThree" aria-expanded="false" class="btn btn-acordeon collapsed" data-target="collapseThree" data-toggle="collapse">
Titulo acordeon 3
<span class="fa fa-angle-double-down">&nbsp;</span>
</button>
</h5>
</div>
<div aria-labelledby="headingThree" class="collapse" data-parent="#accordion" id="collapseThree">
<div class="cuerpo-acordeon">Texto acordeon 3...</div>
</div>
</div>
</div>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

 

 

 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

 

 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

 

 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

 

 

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Formulario

Email
Password
Address
Address 2
City
State Choose......
Zip

Caja de alerta

Comunidad Unicentralista

Por emergencia en el sector, les pedimos evacuen las instalaciones de la sede centro

Tablas

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Tabla horizontal

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Tabla vertical

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

 

Modulo imagen

Titulo imagen
muestra
Titulo imagen
muestra
Titulo imagen
muestra
Titulo imagen
muestra
Titulo imagen
muestra
Titulo imagen
muestra

Diagramacion imagen texto

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!

Diagramacion texto imagen

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!

muestra

Diagramacion video texto

Esto es un video

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!

Esto es un video

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur, nostrum. Quae provident sed corrupti officia perspiciatis error aliquam dolore exercitationem ab non nostrum nulla dolor nihil voluptatibus, ad, pariatur! Consequatur quisquam fugiat illo voluptas fugit sit quos, voluptatem cupiditate, veritatis architecto sequi voluptates aliquam doloremque, voluptate eum labore. Omnis est voluptatum reiciendis minima accusantium nihil vero amet, reprehenderit alias quam cum aliquid doloremque quisquam, obcaecati eaque rerum quasi, sequi repellendus? Quasi soluta doloremque distinctio enim sapiente aperiam non atque, quia qui delectus sit officiis, dolor animi incidunt iusto aut et doloribus. Dignissimos sapiente ad culpa sed enim at, suscipit!

Diagramación 2 VIDEOS

Diagramación 3 VIDEOS

Diagramación 3 Columnas

Aquí va un título

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

Aquí va un título

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

Aquí va un título

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

Diagramación variada

Aquí va un título

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

Tablas

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Firstname Lastname Email
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Firstname Lastname Email
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum aliquam blanditiis ipsum quibusdam consequatur, sapiente fuga ullam ducimus in facilis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, ipsum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus dolores deleniti suscipit, error. Consequatur, aspernatur? Error.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate vitae, alias odit? Lorem ipsum dolor sit amet, consectetur adipisicing. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

 


 

 


 

 


 

 


 

tabs-tipo-1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

tabs-tipo-2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

tabs-tipo-3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

tabs-tipo-6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

tabs-tipo-8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper dui vitae erat ornare eleifend. Vestibulum eu mi fermentum odio tincidunt ornare non aliquam dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer laoreet id lacus et interdum. Mauris id lacus facilisis, euismod leo sed, maximus justo. Curabitur imperdiet dignissim erat, at volutpat nisi fringilla ac. Donec consectetur feugiat tincidunt. Aliquam at metus diam. In facilisis nisl at dictum sodales. In sit amet dictum turpis. In efficitur viverra ipsum, in rhoncus ligula cursus a. Curabitur molestie eleifend volutpat.
Nullam a ligula lacinia, gravida mi sed, imperdiet quam. Nunc egestas interdum sapien, quis rhoncus massa dictum non. Etiam scelerisque quis est nec maximus. Etiam ac lacus dictum, mattis orci nec, laoreet elit. Morbi ut aliquam urna, sit amet dignissim eros. Sed finibus nibh in facilisis malesuada. Nulla gravida arcu eget enim tincidunt pulvinar. Nullam imperdiet, nunc non scelerisque rhoncus, metus leo porta risus, in tristique ante felis sit amet nulla. Vestibulum auctor in augue non varius. Aliquam erat volutpat. Vivamus faucibus finibus urna non interdum. Curabitur ultrices viverra erat, facilisis fermentum eros fermentum imperdiet. Nam posuere turpis vel enim dictum, vel fringilla magna fermentum. Sed eu efficitur nisl. Praesent fermentum enim et dui imperdiet, et ultrices arcu rhoncus. Vestibulum cursus consectetur finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget bibendum magna. Curabitur sed imperdiet massa. Cras commodo metus quis nibh tincidunt, vel semper nulla rutrum. Sed at eros justo. Donec sit amet auctor risus. In enim urna, finibus ac interdum nec, molestie euismod nisi. Aliquam erat volutpat. Phasellus fermentum viverra orci sed rutrum.
Aliquam hendrerit porta ligula, a sodales nulla feugiat eu. In eget sodales neque, sed iaculis nulla. Fusce iaculis porttitor leo, ac laoreet leo gravida sit amet. Cras molestie tincidunt elementum. Proin cursus ex at mattis venenatis. Maecenas laoreet aliquet faucibus. Maecenas ultricies est eros, nec faucibus nisi cursus porttitor.
Morbi eu finibus ligula, id pretium massa. Nullam vitae scelerisque libero, eget fringilla neque. Nullam vitae est dictum nisi tempor lacinia vitae ac sem. Pellentesque lobortis justo vel lectus sodales eleifend. Proin commodo magna sapien, a lacinia lorem feugiat a. Aenean varius, ipsum et volutpat placerat, metus nulla pulvinar dolor, et porta metus orci non lorem. Quisque dapibus est in nulla suscipit condimentum non a massa. Curabitur mollis, augue sit amet hendrerit mattis, lectus justo semper nunc, non blandit libero metus ut ante. Mauris dapibus neque placerat elementum rutrum. Morbi ipsum augue, blandit ac orci at, luctus lobortis urna. Vivamus malesuada turpis sit amet erat euismod, quis vehicula elit lacinia. Quisque vel convallis dui, ut molestie diam. Ut laoreet nunc sed lacus aliquam, pharetra sagittis dui consectetur. Etiam dignissim mi et bibendum euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Panel

titulo

NombrePepita Perez

Correo: ocepedav@ucentral.edu.co

titulo

NombrePepita Perez

Correo: ocepedav@ucentral.edu.co

titulo

NombrePepita Perez

Correo: ocepedav@ucentral.edu.co

Efectos para imagen

muestra

Titulo

link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

muestra

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque recusandae, nobis at porro odit, alias, distinctio libero repellat, laudantium temporibus numquam natus dolores. Veniam aperiam laudantium tempore magnam, dolores commodi quod nisi quidem cum modi, doloremque. Maxime dolorem eius fugit? Voluptates quos, deleniti accusantium, dolores aliquid facilis soluta ad laboriosam ducimus consequatur quis facere iste adipisci recusandae quo ex repellendus fugiat repudiandae cum! Animi nulla necessitatibus ratione fugit libero, asperiores ex, ducimus, vitae doloribus autem pariatur.

Imagen con pie

muestra
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam iure vitae ullam neque.

button dropdowns

 

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


 

 

Clases para la diagramación

Ancho para todos los elementos

Propiedad Clase
Width 25% w-25
Width 50% w-50
Width 75% w-75
Width 100% w-100

Alto para todos los elementos

Propiedad Clase
Height 25% h-25
Height 50% h-50
Height 75% h-75
Height 100% h-100

Maximo ancho - Maximo alto

Propiedad Clase
max-width: 100% mw-100
max-height: 100% mh-100

Centrar horizontal

Propiedad Clase
# mx-auto
# centrar_caja

Espacios entre elementos

Espacio arriba y abajo

Propiedad Clase
margin: 1rem 0; espacio-1-tb
margin: 1.5rem 0; espacio-2-tb
margin: 2rem 0; espacio-3-tb

Espacio solo arriba

Propiedad Clase
margin: 1rem 0 0 0; espacio-1-t
margin: 1.5rem 0 0 0; espacio-2-t
margin: 2rem 0 0 0; espacio-3-t

Espacio solo abajo

Propiedad Clase
margin: 0 0 1rem 0; espacio-1-b
margin: 0 0 1.5rem 0; espacio-2-b
margin: 0 0 2rem 0; espacio-3-b

Alinear texto

Propiedad Clase
Alinear a la izquierda text-left
Alinear al centro text-center
Alinear a la derecha text-right

Borde

Propiedad Clase
Borde en los cuatro lados border
Borde solo arriba border-top
Borde solo a la derecha border-right
Borde solo abajo border-bottom
Borde solo a la izquierda border-left

Centrar imagen a nivel de bloque

Forma de uso Clase

<img src="..." class="mx-auto d-block" alt="...">

mx-auto d-block

Centrar imagen sin nivel de bloque

Forma de uso Clase

<div class="text-center"> <img src="..." class="" alt="..."> </div>

text-center

Clases para botones

Propiedad Forma de uso Clase
Boton de nivel de bloque, abarca todo el ancho de un elemento primario

<button type="button" class="btn btn-primary btn-block">... </button>

btn-block