Utils

Contactar con el profesor

Display

<span class="d-none d-lg-block">Visible en grande</span>
<span class="d-block d-lg-none">Oculto en grande</span>

<span class="d-none d-sm-block">Oculto en pequeño</span>
<span class="d-block d-sm-none">Visible en pequeño</span>

Posibles valores:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Alinear componentes horizontalmente

Para ello aplicaremos los siguientes class aplicados en la row

Alinear componentes verticalmente

Para ello usaremos los siguientes class aplicados en la row:

Margins y Padings

Podemos usar los siguientes class:

<div class="mt-0 mr-1 mb-2 ml-3 pt-0 pr-1 pb-2 pl-3"></div>
  • mt: margin-top
  • mr: margin-right
  • mb: margin-bottom
  • ml: margin-left
  • pt: padding-top
  • pr: padding-right
  • pb: padding-bottom
  • pl: padding-left

El número indica la magnitud del margen o el padding.

Text

text-align

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

estilo

font-weight-bold -> negrita
.font-weight-light
.font-weight-lighter
.font-italic  -> cursiva
.small        -> texto con 85% de tamaño del padre

border

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>

border border-0 border border-top-0

Con color

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

border-radius

<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>

width

<div class="w-25 bg-warning">Width 25%</div> -> width: 25%
<div class="mw-100 bg-warning">Max Width 100%</div> -> max-width: 100%

Colores

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light
← Reordenación de columnas
Componentes →

Aviso Legal | Política de privacidad