GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Utilidades BOOTSTRAP
Bootstrap 4 tiene una gran cantidad de clases de utilidad / ayuda a los elementos de estilo de
forma rápida sin necesidad de utilizar ningún código CSS.

Bordes
Utilizar las borderclases para agregar o quitar los bordes de un elemento:

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>

Ver: Código 189.html

Color del Borde

Añadir un color al borde con cualquiera de las clases de color de borde contextuales:

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

Ver: Código 190.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Radio del Borde o Borde Redondeado

Añadir esquinas redondeadas a un elemento con las clases rounded:

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

Ver: Código 191.html

Flotar y Clearfix
Para flotar un elemento a la derecha se realiza con la clase .float-right o hacia la izquierda
con .float-left, esta característica debe estar acompañada de la clase .clearfix que complementa el
conjunto dándole una “ limpieza” al espacio donde flotara el elemento:
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>

Ver: Código 192.html

Los Flotadores Responsivos

Para flotar un elemento a la izquierda o a la derecha, dependiendo de la anchura de la pantalla, lo
realizamos con las clases de flotación responsivas ( .float-*-left|right- , donde * es sm(> = 576px),
md(> = 768px), lg(> = 992px) o xl(> = 1200 píxeles)):
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<div class="float-sm-right">Flotar a la derecha en ventanas pequeñas o más

anchas</div><br>
<div class="float-md-right">Flotar a la derecha en ventanas medianas o más
anchas</div><br>
<div class="float-lg-right">Flotar a la derecha en ventanas grandes o más
anchas</div><br>
<div class="float-xl-right">Flotar a la derecha en ventanas extra grandes o
más anchas</div><br>
<div class="float-none">No flotar</div>

Ver: Código 193.html

Centrar
Centrar un elemento con la clase .mx-auto (añade margin-left y margin-right: auto):

<div class="mx-auto bg-warning" style="width:150px">Centrado</div>

Ver: Código 194.html

Anchura
Ajuste el ancho de un elemento con las clases W- * ( .w-25, .w-50, .w-75, .w-100, .mw-100):

<div class="w-25 bg-warning">Ancho 25%</div>

<div class="w-50 bg-warning">Ancho 50%</div>
<div class="w-75 bg-warning">Ancho 75%</div>
<div class="w-100 bg-warning">Ancho 100%</div>
<div class="mw-100 bg-warning">Ancho Máximo 100%</div>

Ver: Código 195.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Altura
Ajuste la altura de un elemento con las clases h- * ( .h-25, .h-50, .h-75, .h-100, .mh-100):

<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Ancho 25%</div>
<div class="h-50 bg-warning">Ancho 50%</div>
<div class="h-75 bg-warning">Ancho 75%</div>
<div class="h-100 bg-warning">Ancho 100%</div>
<div class="mh-100 bg-warning" style="height:500px">Ancho Máximo 100%</div>

Ver: Código 196.html

Espaciado
Bootstrap 4 tiene una amplia gama de clases de margen y utilidades de relleno
responsivos. Trabajan para todos los puntos de interrupción: xs(<= 576px), sm(> = 576px), md(> =
768px), lg(> = 992px) o xl(> = 1200 píxeles)):
Las clases se utilizan en el formato: {property}{sides}-{size} para xs y {property}{sides}-
{breakpoint}-{size} para sm, md, lg, y xl.

Donde la propiedad será:

 m - conjuntos margin
 p - conjuntos padding

Donde lados será:

 t- conjuntos margin-top o padding-top
 b- conjuntos margin-bottom o padding-bottom
 l- conjuntos margin-left o padding-left
 r- conjuntos margin-right o padding-right
 x- establece tanto padding-left y padding-righto margin-left y margin-right
 y- establece tanto padding-top y padding-bottom o margin-top y margin-bottom
 en blanco - establece un margin o padding en los 4 lados del elemento

Cuando el tamaño sea de:

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

 0- conjuntos margin o padding de 0

 1- conjuntos margin o padding a .25rem(4px si tamaño de fuente es 16px)
 2- conjuntos margin o padding a .5rem(8px si tamaño de fuente es 16px)
 3- conjuntos margin o padding a 1rem(16px si tamaño de fuente es 16px)
 4- conjuntos margin o padding a 1.5rem(24px si tamaño de fuente es 16px)
 5- conjuntos margin o padding a 3rem(48px si tamaño de fuente es 16px)
 auto- establece marginen Auto

Nota: los márgenes también pueden ser negativos, mediante la adición de una "N" en frente
de tamaño :
 n1- conjuntos margin a -.25rem(-4px si tamaño de fuente es 16px)
 n2- conjuntos margin a -.5rem(-8px si tamaño de fuente es 16px)
 n3- conjuntos margin a -1rem(-16px si tamaño de fuente es 16px)
 n4- conjuntos margin a -1.5rem(-24px si tamaño de fuente es 16px)
 n5- conjuntos margin a -3rem(-48px si tamaño de fuente es 16px)

<div class="pt-4 bg-warning">Yo solo tengo “top padding” (1.5rem = 24px)</div>

<div class="p-5 bg-success">Yo tengo “padding” en todos los lados (3rem =
48px)</div>
<div class="m-5 pb-5 bg-info">Yo tengo “margin” en todos los lados (3rem =
48px) y un “bottom padding” (3rem = 48px)</div>

Ver: Código 197.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Más ejemplos de espaciado

.m-# / m-*-# margen en todos los lados

.mt-# / mt-*-# margen superior

.mb-# / mb-*-# parte inferior del margen

.ml-# / ml-*-# margen izquierdo

.mr-# / mr-*-# margen derecho

.mx-# / mx-*-# margen izquierda y derecha

.my-# / my-*-# margen superior e inferior

.p-# / p-*-# Relleno en todos lados

.pt-# / pt-*-# Relleno superior

.pb-# / pb-*-# fondo Relleno

.pl-# / pl-*-# Relleno a la izquierda

.pr-# / pr-*-# Relleno derecho

.py-# / py-*-# Relleno superior e inferior

.px-# / px-*-# Relleno de izquierda y derecha

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Sombras
Utilizar las clases shadow para añadir sombras a un elemento:

<div class="shadow-none p-4 mb-4 bg-light">Sin sombra</div>

<div class="shadow-sm p-4 mb-4 bg-white">Sombra pequeña</div>
<div class="shadow p-4 mb-4 bg-white">Sombra por defecto</div>
<div class="shadow-lg p-4 mb-4 bg-white">Sombra grande</div>

Ver: Código 198.html

Alineación vertical
Utilizar las clases align- para cambiar la alineación de elementos (sólo funciona en los elementos
en línea, en línea-bloque, en línea -tabla y de celda de tabla):

<span class="align-baseline">Base</span>
<span class="align-top">Tope</span>
<span class="align-middle">Medio</span>
<span class="align-bottom">Final</span>
<span class="align-text-top">Texto en el tope</span>
<span class="align-text-bottom">Texto al final</span>

Ver: Código 199.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Embed Responsiva
Para crear un vídeo responsivo o presentación de diapositivas incrustada basada en el ancho de la
ventana padre.
Añadir .embed-responsive-item a los elementos incrustados (como <iframe> o <video>) en un
elemento padre con .embed-responsive y una relación de aspecto de radio de su elección:

<!-- 21:9 aspect ratio -->

<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Ver: Código 200.html

Visibilidad
Utilizar las clases .visible o .invisible para controlar la visibilidad de los elementos.
Nota: Estas clases no cambian el valor de visualización de CSS. Ellas sólo añaden visibility:visible
o visibility:hidden:

<div class="visible">Soy visible</div>

<div class="invisible">Soy invisible</div>

Ver: Código 201.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Posición
Utilice la clase .fixed-top, para que cualquier elemento permanezca fijo en la parte superior de la
página:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

...
</nav>

Ver: Código 202.html

Utilice la clase .fixed-bottom, para fijar cualquier elemento en la parte inferior de la página :

Utilice la clase .sticky-top, para fijar cualquier elemento en la parte superior de la página cuando
se ha desplazado más allá de ella.
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">

...
</nav>

Ver: Código 203.html

Icono Cerrar
Utilice la clase .close de estilo para un icono de cierre. Esto a menudo se utiliza para alertas y
modales. Tenga en cuenta que utilizamos el símbolo &times; para crear el icono real (una mejor
perspectiva "x"). Tenga en cuenta también que flota a la derecha por defecto:

<button type="button" class="close">&times;</button>

Ver: Código 204.html

Lectores de Pantalla
Usa la clase .sr-only para ocultar un elemento en todos los dispositivos, excepto los lectores de
pantalla:

<span class="sr-only">Esconderé en todas las pantallas excepto en lectores de

pantalla.</span>

Ver: Código 205.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Colores
Aquí hay una lista de todas las clases de texto y color de fondo:
Las clases para los colores de texto son: .text-muted, .text-primary, .text-success, .text-info, .text-
warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (color por defecto negro)
y .text-light:

Ver: Código 206.html

Las clases de texto contextuales también se pueden utilizar en los enlaces, lo que añadirá un color
más oscuro en efecto hover:

Ver: Código 207.html

También puede agregar un 50% de opacidad para el texto negro o blanco con las clases .text-
black-50 o .text-white-50:

Ver: Código 208.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Los Colores de Fondo

Las clases para los colores de fondo son: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-
danger, .bg-secondary, .bg-darky .bg-light.
Tenga en cuenta que los colores de fondo no fijan el color del texto, por lo que en algunos casos se
requiere usarlos junto con una clase .text-*.

Ver: Código 209.html

Tipografía Clases / Texto

Aquí hay una lista de todas las clases de la tipografía / de texto:

Clase Descripción

.display-* Muestra encabezados que son usados para tener mejor visibildad que los
encabezados normales (fuentes de gran tamaño, brillo y ancho) y estas
están representadas en cuatro clases: .display-1, .display-2, .display-
3, .display-4

.font-weight-bold Texto Bold

.font-weight-bolder Texto Bolder bold

.font-weight-normal Texto Normal

.font-weight-light Texto Light weight

.font-weight-lighter Texto Lighter weight

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

.font-italic Texto Itálico

.lead Hace que un párrafo se destaque

.small Indica textos pequeños (establece el 85% del tamaño del padre)

.text-break Evita que el texto largo dañe el diseño

.text-center Indica texto alineado al centro

.text-decoration-none Remueve el subrayado de un enlace

.text-left Indica texto alineado a la izquierda

.text-justify Indica texto justificado

.text-monospace Texto monoespacio

.text-nowrap Texto no alineado

.text-lowercase Indica texto en m inúsculas

.text-reset Restablece los colores de un texto o enlace (heredado de sus padres)

.text-right Indica texto alineado a la derecha

.text-uppercase Indica Mayúsculas

.text-capitalize Indica texto capital

.initialism Muestra el texto dentro de una abreviatura <abbr> en una pequeña

fuente
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

.list-unstyled Remueve el estilo de lista por defecto y deja un margen en los ítems de la
lista (trabaja en <ul> y <ol>). Esta clase solo aplica a los hijos de una lista.

.list-inline Coloca todos los ítems de una lista , en un línea simple (se usa junto a .list-
inline-item en cada elemento <li> )

.pre-scrollable Hace a un elemento <pre> scrollable

Elementos de bloque
Para hacer un elemento de bloque, agregue la clase .d-block. Utilice cualquiera de las clases d-*-
block para controlar cuando el elemento debe ser un elemento de bloque en un ancho de
pantalla específica:

<span class="d-block bg-success">d-block</span>

<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>

Ver: Código 210.html

Otras clases de indicación

Otras clases de visualización también están disponibles:

Clase Descripción

.d-none Esconde un elemento

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

.d-*-none Esconde un elemento y especifica el tamaño de la pantalla

.d-inline Crea un elemento inline

.d-*-inline Crea un elemento inline en un tamaño especifico de pantalla

.d-inline-block Crea un elemento inline block

.d-*-inline-block Crea un elemento inline inline block en un tamaño especifico de pantalla

.d-table Crea un elemento display como una tabla

.d-*-table Crea un elemento display como una tabla en un tamaño especifico de

pantalla

.d-table-cell Crea un elemento display como una celda de tabla

.d-*-table-cell Crea un elemento display como una celda de tabla en un tamaño específico
de pantalla

.d-table-row Crea un elemento display como una fila de una tabla

.d-*-table-row Crea un elemento display como una fila de una tabla en un tamaño
específico de pantalla

.d-flex Crea un contenedora flexbox y transforma los hijos directos en elementos

flex

.d-*-flex Crea un contenedora flexbox en un tamaño específico de pantalla.

.d-inline-flex Crea un contenedora inline flexbox

.d-*-inline-flex Crea un contenedora inline flexbox en un tamaño específico de pantalla.

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Flex
Utilice la clase .flex-* para controlar la disposición con FlexBox.

Más de flex en el siguiente tema.