Unidad 7: Utilidades en Bootstrap

7.1 Introducción a las Utilidades en Bootstrap

Bootstrap proporciona un conjunto de clases de utilidades que permiten aplicar estilos de forma rápida sin necesidad de escribir CSS personalizado. Estas utilidades facilitan la manipulación de aspectos como colores, fondos, bordes, espaciado, visibilidad, posicionamiento y más.

Ventajas de usar Utilidades en Bootstrap

📋 Eficiencia: Permiten aplicar estilos sin necesidad de CSS adicional.
📱 Responsividad: Muchas utilidades incluyen variantes responsivas (.d-md-block, .m-lg-3, etc.).
🎨 Consistencia: Garantizan un diseño uniforme en toda la aplicación.
🚀 Velocidad de desarrollo: Se pueden aplicar directamente en los elementos HTML sin modificar hojas de estilo.

Ejemplo de Utilidades en Bootstrap

Ejemplo de uso de utilidades

<div class="bg-primary text-white p-3 rounded shadow-lg">
    Caja con fondo azul, texto blanco, padding, bordes redondeados y sombra.
</div>

.bg-primary → Color de fondo azul.
.text-white → Texto en color blanco.
.p-3 → Padding de tamaño 3.
.rounded → Bordes redondeados.
.shadow-lg → Sombra grande.

7.2 Utilidades de Estilo y Diseño

7.2.1 Background (Fondos)

Las clases .bg-* permiten cambiar el color de fondo de un elemento utilizando la paleta de Bootstrap.

Ejemplo de fondos

<div class="bg-primary text-white p-3">Fondo Azul</div>
<div class="bg-success text-white p-3">Fondo Verde</div>
<div class="bg-warning text-dark p-3">Fondo Amarillo</div>

.bg-primary → Azul
.bg-success → Verde
.bg-warning → Amarillo

Colores disponibles

.bg-primary → Azul
.bg-primary-sutile → Azul suave
.bg-secondary → Gris
.bg-secondary-sutile → Gris suave
.bg-success → Verde
.bg-success-sutile → Verde suave
.bg-danger → Rojo
.bg-danger-sutile → Rojo suave
.bg-warning → Amarillo
.bg-warning-sutile → Amarillo suave
.bg-info → Celeste
.bg-info-sutile → Celeste suave
.bg-light → Gris claro
.bg-light-sutile → Gris claro suave
.bg-dark → Gris oscuro
.bg-dark-sutile → Gris oscuro
.bg-body-secondary → Gris medio
.bg-body-tertiary → Gris claro
.bg-body → Gris muy claro
.bg-white → Blanco
.bg-black → Negro
.bg-transparent → Transparente

Podemos verlos copieando el siguiente ejemplo:

paleta de colores bs

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-primary-subtle text-primary-emphasis">.bg-primary-subtle</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-secondary-subtle text-secondary-emphasis">.bg-secondary-subtle</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-success-subtle text-success-emphasis">.bg-success-subtle</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-danger-subtle text-danger-emphasis">.bg-danger-subtle</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-warning-subtle text-warning-emphasis">.bg-warning-subtle</div>
<div class="p-3 mb-2 bg-info text-dark">.bg-info</div>
<div class="p-3 mb-2 bg-info-subtle text-info-emphasis">.bg-info-subtle</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-light-subtle text-light-emphasis">.bg-light-subtle</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-dark-subtle text-dark-emphasis">.bg-dark-subtle</div>
<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-body">.bg-transparent</div>

Podemos utilizar gradients para crear fondos degradados. Para ello, al agregar una clase .bg-gradient, se agrega un gradiente lineal como imagen de fondo a los fondos. Este degradado comienza con un blanco semitransparente que se desvanece hacia el fondo.

¿Necesitas un degradado en tu CSS personalizado? Solo agrega background-image: var(--bs-gradient);.

Ejemplo de fondos degradados

<div class="bg-primary bg-gradient p-3 text-white">Fondo degradado</div>

Se pueden usar variantes de opacidad (.bg-opacity-*):

Los valores de opacidad van de 0 a 100, donde 0 es completamente transparente y 100 es completamente opaco.

Ejemplo de opacidad en fondos

<div class="bg-primary bg-opacity-50 text-white p-3">Fondo Azul 50%</div>

También podemos aplicar imágenes de fondo usando clases CSS personalizadas.

Ejemplo de fondo con imagen

<div class="p-5 text-white" style="background-image: url('imagen.jpg'); background-size: cover;">
    Fondo con imagen de fondo personalizada
</div>

Las opciones de bakground-size son:

cover → La imagen se ajusta al tamaño del contenedor.
contain → La imagen se ajusta al tamaño del contenedor sin recortar.
auto → La imagen se muestra en su tamaño original.
100% 100% → La imagen se ajusta al 100% del ancho y alto del contenedor.

7.2.2 Borders (Bordes)

Podemos aplicar bordes a cualquier elemento con .border. Podemos añadir bordes a elementos personalizados:

border: añade un borde a todo el perímetro de un elemento.
border-top: añade un borde solo en la parte superior.
border-end: añade un borde solo en el lado derecho.
border-bottom: añade un borde solo en la parte inferior
border-start: añade un borde solo en el lado izquierdo.
border-0: elimina todos los bordes.

Ejemplo de bordes en lados específicos

<div class="border border-top p-3">Solo borde superior</div>
<div class="border border-bottom border-success p-3">Borde inferior verde</div>
<div class="border border-end border-4 border-warning p-3">Borde derecho grueso amarillo</div>

- .border-top → Aplica borde solo en la parte superior. - .border-bottom → Aplica borde solo en la parte inferior. - .border-end → Aplica borde solo en el lado derecho. - .border-4 → Grosor adicional del borde.

Podemos personalizar el grosor del borde con .border-* (.border-3, .border-4, etc.) y el color con .border-* (.border-primary, .border-danger, etc.).

Ejemplo de bordes

<div class="border p-3">Borde predeterminado</div>
<div class="border border-danger p-3">Borde rojo</div>
<div class="border border-3 border-primary p-3">Borde azul grueso</div>

.border → Borde básico.
.border-danger → Borde rojo.
.border-3 → Grosor del borde.

Los bordes también pueden ser redondeados:

Ejemplo de bordes redondeados

<div class="border rounded p-3">Bordes redondeados</div>
<div class="border rounded-pill p-3">Bordes ovalados</div>

- .rounded → Bordes redondeados. - .rounded-pill → Bordes completamente ovalados.

Los clases que podemos utilizar para los bordes redondeados son las siguientes:

.rounded → Bordes redondeados.
.rounded-0 → Bordes cuadrados.
.rounded-1 → Bordes redondeados pequeños.
.rounded-2 → Bordes redondeados medianos.
.rounded-3 → Bordes redondeados grandes.
.rounded-circle → Bordes completamente redondos.
.rounded-pill → Bordes ovalados.

Si solo queremos redondear alguna de la esquinas:

.rounded-top → Redondea solo la esquina superior.
.rounded-end → Redondea solo la esquina derecha.
.rounded-bottom → Redondea solo la esquina inferior.
.rounded-start → Redondea solo la esquina izquierda.

Con estas opciones, Bootstrap permite personalizar los estilos de fondos y bordes de manera rápida y eficiente sin necesidad de CSS adicional.

7.2.3 Colors (Colores)

Bootstrap ofrece una amplia paleta de colores predefinidos para texto, fondos y bordes. Estas clases ayudan a mantener un diseño uniforme y facilitan la personalización de elementos.

Aplicación de Colores de Texto

Podemos cambiar el color del texto usando .text-*.

Ejemplo de colores de texto

<p class="text-primary">Texto azul</p>
<p class="text-success">Texto verde</p>
<p class="text-danger">Texto rojo</p>
<p class="text-warning">Texto amarillo</p>
<p class="text-muted">Texto gris atenuado</p>

.text-primary → Azul
.text-success → Verde
.text-danger → Rojo
.text-warning → Amarillo

paleta de colores para el texto

<p class="text-primary">.text-primary</p>
<p class="text-primary-emphasis">.text-primary-emphasis</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-secondary-emphasis">.text-secondary-emphasis</p>
<p class="text-success">.text-success</p>
<p class="text-success-emphasis">.text-success-emphasis</p>
<p class="text-danger">.text-danger</p>
<p class="text-danger-emphasis">.text-danger-emphasis</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-warning-emphasis">.text-warning-emphasis</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-info-emphasis">.text-info-emphasis</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-light-emphasis">.text-light-emphasis</p>
<p class="text-dark bg-white">.text-dark</p>
<p class="text-dark-emphasis">.text-dark-emphasis</p>

<p class="text-body">.text-body</p>
<p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-tertiary">.text-body-tertiary</p>

<p class="text-black bg-white">.text-black</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50 bg-white">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>

Podemos hacer que los colores sean más sutiles con .text-opacity-*.

Ejemplo de opacidad en texto

<p class="text-primary text-opacity-50">Texto azul al 50%</p>

7.3 Control de Diseño y Posicionamiento

7.3.1 Display (Visibilidad de Elementos)

Las clases .d-* permiten controlar cómo se muestra un elemento. Las opciones de display incluyen elementos de bloque, en línea y ocultos.

.d-block → Elemento de bloque.
.d-none → Oculto.
.d-inline → Elemento en línea.
.d-inline-block → Elemento en línea con bloque.
.d-flex → Contenedor de elementos flexibles.
.d-grid → Contenedor de elementos en cuadrícula.
.d-table → Contenedor de elementos de tabla.
.d-table-row → Fila de tabla.
.d-table-cell → Celda de tabla.

Ejemplo de display

<div class="d-block bg-primary text-white p-3">Bloque visible</div>
<div class="d-none bg-secondary text-white p-3">Oculto</div>
<div class="d-inline bg-success text-white p-3">Elemento en línea</div>

.d-block → Elemento de bloque
.d-none → Oculto
.d-inline → Elemento en línea

Las variantes responsivas permiten cambiar la visibilidad según el tamaño de la pantalla (.d-md-none, .d-lg-block).

Ejemplo de display responsivo

<div class="d-none d-md-block bg-warning text-dark p-3">Visible solo en pantallas medianas o grandes</div>

Tamaño de la pantalla	Clase
Oculto en todos los tamaños	`.d-none`
Oculto solo en xs	`.d-none .d-sm-block`
Oculto solo en sm	`.d-sm-none .d-md-block`
Oculto solo en md	`.d-md-none .d-lg-block`
Oculto solo en lg	`.d-lg-none .d-xl-block`
Oculto solo en xl	`.d-xl-none`
Oculoto solo en xxl	`.d-xxl-none`
Visible en todos los tamaños	`.d-block`
Visible solo en xs	`.d-block .d-sm-none`
Visible solo en sm	`.d-none .d-sm-block .d-md-none`
Visible solo en md	`.d-none .d-md-block .d-lg-none`
Visible solo en lg	`.d-none .d-lg-block .d-xl-none`
Visible solo en xl	`.d-none .d-xl-block`
Visible solo en xxl	`.d-none .d-xxl-block`

Ejemplo, oculata en pantallas más pequeñas que lg y visible en pantallas más grandes que lg:

Ejemplo de display responsivo

<div class="d-none d-lg-block bg-warning text-dark p-3">Visible solo en pantallas grandes</div>

7.3.2 Float (Flotado de Elementos)

Estas clases de utilidades hacen flotar un elemento hacia la izquierda o hacia la derecha, o deshabilitan la flotación, según el tamaño actual de la ventana gráfica mediante la propiedad flotante CSS. Se incluye !important para evitar problemas de especificidad. Estas usan los mismos puntos de interrupción de la ventana gráfica que nuestro sistema de cuadrícula. Tenga en cuenta que las utilidades flotantes no tienen efecto en los elementos flex.

Podemos hacer que un elemento flote a la izquierda o derecha usando .float-*.

Ejemplo de float

<div class="float-start bg-primary text-white p-3">Flotando a la izquierda</div>
<div class="float-end bg-danger text-white p-3">Flotando a la derecha</div>

.float-start → Flota a la izquierda
.float-end → Flota a la derecha
.float-none → Sin flotado

Las variantes responsivas permiten cambiar el flotado según el tamaño de la pantalla (.float-lg-end, .float-sm-none).

Ejemplo de float responsivo

<div class="float-sm-end">Float end on viewports sized SM (small) or wider</div><br>
<div class="float-md-end">Float end on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-end">Float end on viewports sized LG (large) or wider</div><br>
<div class="float-xl-end">Float end on viewports sized XL (extra large) or wider</div><br>
<div class="float-xxl-end">Float end on viewports sized XXL (extra extra large) or wider</div><br>

Las variantes resposivas son:

.float-sm-start → Flota a la izquierda en pantallas pequeñas.
-float-sm-end → Flota a la derecha en pantallas pequeñas.
.float-sm-none → Sin flotado en pantallas pequeñas.
.float-md-start → Flota a la izquierda en pantallas medianas.
.float-md-end → Flota a la derecha en pantallas medianas.
.float-md-none → Sin flotado en pantallas medianas.
.float-lg-start → Flota a la izquierda en pantallas grandes.
.float-lg-end → Flota a la derecha en pantallas grandes.
.float-lg-none → Sin flotado en pantallas grandes.
.float-xl-start → Flota a la izquierda en pantallas extra grandes.
.float-xl-end → Flota a la derecha en pantallas extra grandes.
.float-xl-none → Sin flotado en pantallas extra grandes.
.float-xxl-start → Flota a la izquierda en pantallas extra extra grandes.
.float-xxl-end → Flota a la derecha en pantallas extra extra grandes.
.float-xxl-none → Sin flotado en pantallas extra extra grandes.

7.3.3 Position (Posicionamiento)

Hay clases de posicionamiento rápido disponibles, aunque no son responsivas.

    <div class="position-static bg-light p-5">Posición Estática</div>
    <div class="position-relative bg-light p-5">Posición Relativa</div>
    <div class="position-absolute bg-light p-5">Posición Absoluta</div>
    <div class="position-fixed bg-light p-5">Posición Fija</div>
    <div class="position-sticky bg-light p-5">Posición Pegajosa</div>

.position-static → Posición estática.
.position-relative → Posición relativa.
.position-absolute → Posición absoluta.
.position-fixed → Posición fija.
.position-sticky → Posición pegajosa.

Organizar elementos

Organice los elementos fácilmente con las utilidades de posicionamiento de bordes. El formato es {property}-{position}.

Donde la propiedad es una de:

top - for the vertical top position
start - for the horizontal left position (in LTR)
bottom - for the vertical bottom position
end - for the horizontal right position (in LTR)

Donde la posición es una de:

0 - for 0 edge position
50 - for 50% edge position
100- para una posición de borde 100%T

posicionamiento

Ejemplo de posicionamiento

<div class="position-relative">
    <div class="position-absolute top-0 start-0"></div>
    <div class="position-absolute top-0 end-0"></div>
    <div class="position-absolute top-50 start-50"></div>
    <div class="position-absolute bottom-50 end-50"></div>
    <div class="position-absolute bottom-0 start-0"></div>
    <div class="position-absolute bottom-0 end-0"></div>
</div>

Además, también puede centrar los elementos con la clase de utilidad de transformación .translate-middle.

Ejemplo de posicionamiento centrado

<div class="position-relative">
    <div class="position-absolute top-0 start-0 translate-middle"></div>
    <div class="position-absolute top-0 start-50 translate-middle"></div>
    <div class="position-absolute top-0 start-100 translate-middle"></div>
    <div class="position-absolute top-50 start-0 translate-middle"></div>
    <div class="position-absolute top-50 start-50 translate-middle"></div>
    <div class="position-absolute top-50 start-100 translate-middle"></div>
    <div class="position-absolute top-100 start-0 translate-middle"></div>
    <div class="position-absolute top-100 start-50 translate-middle"></div>
    <div class="position-absolute top-100 start-100 translate-middle"></div>
</div>

Ejemplo de posicionamiento

ejemplos de posicionamiento

Ejemplos de posicionamiento

<button type="button" class="btn btn-primary position-relative">
    Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>

<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">
    Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(--bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</div>

<button type="button" class="btn btn-primary position-relative">
    Alerts <span class="position-absolute top-0 start-100 translate-middle badge border border-light rounded-circle bg-danger p-2"><span class="visually-hidden">unread messages</span></span>
</button>

7.3.4 Z-Index (Control de Capas)

Podemos controlar qué elementos aparecen por encima de otros usando .z-*. Los valores que pueden tomar son:

.z-1 → Capa inferior.
.z-2 → Capa media.
.z-3 → Capa superior.
.z-n1 → Capa inferior con !important.
.z-n2 → Capa media con !important.
.z-n3 → Capa superior con !important.

Caunto más alto es el número (*), más arriba se mostrará el elemento.

z-index

Ejemplo de Z-Index

<div class="position-relative bg-light p-5" style="height: 200px;">
    <div class="position-absolute top-50 start-50  bg-primary text-white p-3 z-1">Capa Inferior (z-1)</div>
    <div class="position-absolute top-50 start-50 translate-middle bg-danger text-white p-3 z-3">Capa Superior (z-3)</div>
</div>

.z-1, .z-3 → Define la jerarquía visual de los elementos superpuestos.
.translate-middle → Centra los elementos en el medio de su contenedor.

7.4 Tamaño y Espaciado

7.4.1 Sizing (Tamaños)

Relativo al Contenedor Padre

Podemos ajustar el ancho y alto de los elementos con .w-* y .h-*. Donde el * puede ser un número del 0 al 100.

Podemos ajustar el ancho y alto de los elementos con .w-* y .h-*.

Ejemplo de control de tamaño

<div class="w-25 bg-primary text-white p-3">25% de ancho</div>
<div class="w-50 bg-success text-white p-3">50% de ancho</div>
<div class="w-100 bg-danger text-white p-3">100% de ancho</div>

.w-25, .w-50, .w-100 → Ancho relativo al contenedor padre.

Podemos ajunstar el alto de los elementos con .h-*.

Ejemplo de control de tamaño

<div style="height: 100px;">
    <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
    <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
    <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
    <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
    <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
</div>

.h-25, .h-50, .h-100 → Alto relativo al contenedor padre.

7.4.2 Spacing (Márgenes y Padding)

Las utilidades de espaciado que se aplican a todos los puntos de interrupción, desde xs hasta xxl, no tienen abreviatura de punto de interrupción. Esto se debe a que esas clases se aplican desde min-width: 0 en adelante y, por lo tanto, no están restringidas por una consulta de medios (media query). Sin embargo, los puntos de interrupción restantes sí incluyen una abreviatura de punto de interrupción.

Las clases se nombran utilizando el formato {propiedad}{lados}-{tamaño} para xs y {propiedad}{lados}-{puntoDeInterrupción}-{tamaño} para sm, md, lg, xl y xxl.

Donde la propiedad es una de:

m - para clases que establecen margin
p - para clases que establecen padding

Donde los lados son uno de:

t - para clases que establecen margin-top o padding-top
b - para clases que establecen margin-bottom o padding-bottom
s - (start) para clases que establecen margin-left o padding-left en LTR, margin-right o padding-right en RTL
e - (end) para clases que establecen margin-right o padding-right en LTR, margin-left o padding-left en RTL
x - para clases que establecen tanto *-left como *-right
y - para clases que establecen tanto *-top como *-bottom
(en blanco) - para clases que establecen margin o padding en los 4 lados del elemento

Donde el tamaño es uno de:

0 - para clases que eliminan el margin o padding estableciéndolo en 0
1 - (por defecto) para clases que establecen el margin o padding en $spacer * 0.25
2 - (por defecto) para clases que establecen el margin o padding en $spacer * 0.5
3 - (por defecto) para clases que establecen el margin o padding en $spacer
4 - (por defecto) para clases que establecen el margin o padding en $spacer * 1.5
5 - (por defecto) para clases que establecen el margin o padding en $spacer * 3
auto - para clases que establecen el margin en auto

Ejemplo de espaciado

<div class="m-3 p-3 border bg-light">Margen y Padding de tamaño 3</div>
<div class="mt-5 p-5 border bg-warning">Margen superior 5 y Padding 5</div>

.m-3, .p-3 → Aplica márgenes y padding uniformemente.
.mt-5 → Margen superior de tamaño 5.

**Centrado horizontal **

Podemos centrar elementos horizontal .mx-auto.

Ejemplo de centrado

<div class="mx-auto p-2" style="width: 200px;">
    Centered element
</div>

.d-flex → Contenedor de elementos flexibles.
.justify-content-center → Centra horizontalmente.
.align-items-center → Centra verticalmente.

Gap Cuando se usa display: grid o display: flex, se pueden utilizar las utilidades de gap en el elemento padre. Esto evita tener que agregar utilidades de margin a los elementos secundarios de un contenedor grid o flex.

gap

Ejemplo de gap

<div class="grid gap-3">
    <div class="p-2 g-col-6">Grid item 1</div>
    <div class="p-2 g-col-6">Grid item 2</div>
    <div class="p-2 g-col-6">Grid item 3</div>
    <div class="p-2 g-col-6">Grid item 4</div>
</div>

Podemos utilizar alternativamente row-gap y column-gap para controlar el espacio entre filas y columnas.

Ejemplo de row-gap

<div class="grid gap-0 row-gap-3">
    <div class="p-2 g-col-6">Grid item 1</div>
    <div class="p-2 g-col-6">Grid item 2</div>
    <div class="p-2 g-col-6">Grid item 3</div>
    <div class="p-2 g-col-6">Grid item 4</div>
</div>

Ejemplo de column-gap

<div class="grid gap-0 column-gap-3">
    <div class="p-2 g-col-6">Grid item 1</div>
    <div class="p-2 g-col-6">Grid item 2</div>
    <div class="p-2 g-col-6">Grid item 3</div>
    <div class="p-2 g-col-6">Grid item 4</div>
</div>

7.4.3 Vertical Align (Alineación Vertical)

Cambie la alineación de los elementos con las utilidades vertical-alignment. Tenga en cuenta que la alineación vertical solo afecta a los elementos de celda en línea, bloque en línea, tabla en línea y tabla.

Puedes utilizar .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, y .align-text-top según se necesite.

Para centrar verticalmente el contenido no en línea (como <div>s y más), utilice nuestras utilidades de caja flexible.

En elementos en línea

Ejemplo de alineación en elementos en línea

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Ejemplo de alineación en elementos celdas

<table style="height: 100px;">
    <tbody>
        <tr>
        <td class="align-baseline">baseline</td>
        <td class="align-top">top</td>
        <td class="align-middle">middle</td>
        <td class="align-bottom">bottom</td>
        <td class="align-text-top">text-top</td>
        <td class="align-text-bottom">text-bottom</td>
        </tr>
    </tbody>
</table>

7.4.4 Visibility (Visibilidad)

Controle la visibilidad de los elementos, sin modificar su visualización, con las utilidades de visibilidad.

Establezca la visibilidad de los elementos con nuestras utilidades de visibilidad. Estas clases de utilidades no modifican el valor de visualización en absoluto y no afectan el diseño: los elementos .invisible aún ocupan espacio en la página.

Aplique .visible o .invisible según sea necesario.

Ejemplo de visibilidad

<div class="visible bg-success text-white p-3">Elemento Visible</div>
<div class="invisible bg-danger text-white p-3">Elemento Invisible</div>

- .visible → Hace que el elemento sea visible. - .invisible → Oculta el elemento sin eliminarlo del flujo del documento.

Con estas herramientas, Bootstrap permite diseñar y controlar el posicionamiento, tamaño, espaciado y visibilidad de los elementos de manera flexible y eficiente.