Tutorial Bootstrap: Clases de utilidad

¿Qué son y para qué sirven las clases de utilidad?

Las clases de utilidad en Bootstrap son clases predefinidas que permiten aplicar estilos CSS de manera rápida y eficiente a los elementos HTML sin necesidad de escribir CSS personalizado. Estas clases proporcionan una forma directa de manipular el diseño y el comportamiento de los componentes en una página web mediante el uso de clases específicas que cubren una amplia gama de funciones comunes.

Las clases de utilidad sirven para varias tareas, entre las que se incluyen:

• Espaciado (margen y padding): Permiten ajustar el margen y el padding de los elementos de manera sencilla. Por ejemplo, para agregar un margen inferior de 3 unidades, se puede usar la clase mb-3.

<div class="mb-3">Contenido con margen inferior</div>

• Colores de texto y fondo: Facilitan la asignación de colores a los textos y fondos de los elementos. Por ejemplo, para cambiar el color del texto a rojo, se puede usar text-danger, y para cambiar el fondo a azul, bg-primary.

<p class="text-danger">Texto en rojo</p>
<div class="bg-primary text-white">Fondo azul con texto blanco</div>

• Tamaño de fuente: Ajustan el tamaño de la fuente de los elementos. Por ejemplo, fs-1 aplica un tamaño de fuente grande, mientras que fs-6 aplica un tamaño de fuente pequeño.

<p class="fs-1">Fuente grande</p>
<p class="fs-6">Fuente pequeña</p>

• Alineación de texto: Permiten alinear el texto a la izquierda, derecha, centro o justificarlo. Por ejemplo, text-center centra el texto.

<p class="text-center">Texto centrado</p>

• Visibilidad: Controlan la visibilidad de los elementos mediante clases como d-none para ocultar un elemento o d-block para mostrarlo como un bloque.

<div class="d-none d-md-block">Visible solo en pantallas medianas y grandes</div>

• Flexbox y Grid: Facilitan el uso de flexbox y grid para la disposición de los elementos. Por ejemplo, d-flex activa el modelo de caja flexible, y d-grid activa el modelo de cuadrícula.

<div class="d-flex justify-content-between">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

• Bordes y radio de bordes: Permiten agregar y personalizar los bordes de los elementos. Por ejemplo, border agrega un borde a un elemento, y rounded-circle lo convierte en un círculo.

<div class="border p-3">Div con borde</div>
<img src="imagen.jpg" class="rounded-circle" alt="Imagen circular">

Las clases de utilidad de Bootstrap son esenciales para la rápida creación de prototipos y la implementación de diseños consistentes sin necesidad de escribir CSS adicional. Estas clases están diseñadas para ser intuitivas y fáciles de recordar, lo que permite a los desarrolladores centrarse en la funcionalidad y el contenido de sus aplicaciones.

Clases de tamaño

Las clases de tamaño en Bootstrap permiten ajustar rápidamente las dimensiones de los elementos, como el ancho, el alto y el tamaño máximo y mínimo, utilizando clases predefinidas. Estas clases son útiles para garantizar que los elementos se dimensionen correctamente en diferentes dispositivos y resoluciones sin necesidad de escribir CSS personalizado.

Ancho

Bootstrap proporciona clases para ajustar el ancho de los elementos de forma porcentual. Las clases siguen el formato w- seguido de un valor porcentual. Los valores permitidos son:

• w-25: 25% de ancho
• w-50: 50% de ancho
• w-75: 75% de ancho
• w-100: 100% de ancho

<div class="card w-25">Ancho 25%</div>
<div class="card w-50">Ancho 50%</div>
<div class="card w-75">Ancho 75%</div>
<div class="card w-100">Ancho 100%</div>

Alto

Similar a las clases de ancho, Bootstrap también proporciona clases para ajustar el alto de los elementos. Las clases siguen el formato h- seguido de un valor porcentual. Los valores permitidos son:

• h-25: 25% de alto
• h-50: 50% de alto
• h-75: 75% de alto
• h-100: 100% de alto

<div class="row">
  <div class="col">
    <div class="card h-25">Alto 25%</div>
    <div class="card h-50">Alto 50%</div>
    <div class="card h-75">Alto 75%</div>
    <div class="card h-100">Alto 100%</div>
  </div>
</div>

Tamaño máximo y mínimo

Para controlar las dimensiones máximas y mínimas de los elementos, Bootstrap ofrece clases que ajustan el tamaño máximo (max-) y mínimo (min-). Estas clases son útiles para asegurar que los elementos no excedan o no sean menores que ciertas dimensiones.

• mw-100: Máximo ancho 100%
• mh-100: Máximo alto 100%
• min-vw-100: Mínimo ancho 100% del viewport
• min-vh-100: Mínimo alto 100% del viewport

<div class="border" style="width: 50%; height: 100px;">
  <div class="card border border-success mw-100" style="width: 200%;">Max-width 100%</div>
</div>  
<div class="border" style="height: 100px;">
  <img src="imagen.jpg" class="mh-100" alt="Foto con ancho máximo 100%" style="width: 100px; height: 200px;">
</div>

<div class="card border border-success min-vw-100">Div con mínimo ancho 100% del viewport</div>
<div class="card border border-danger min-vh-100">Div con mínimo alto 100% del viewport</div>

Tamaños de contenedores

Bootstrap también incluye clases para ajustar el tamaño de los contenedores de forma más específica, utilizando valores de tamaño predefinidos. Estas clases incluyen:

• container-sm: Contenedor pequeño
• container-md: Contenedor mediano
• container-lg: Contenedor grande
• container-xl: Contenedor extra grande
• container-xxl: Contenedor extra extra grande

<div class="border container-sm">Contenedor pequeño</div>
<div class="border container-md">Contenedor mediano</div>
<div class="border container-lg">Contenedor grande</div>
<div class="border container-xl">Contenedor extra grande</div>
<div class="border container-xxl">Contenedor extra extra grande</div>

Las clases de tamaño en Bootstrap permiten un control granular y flexible sobre las dimensiones de los elementos, asegurando que se adapten adecuadamente a diferentes tamaños de pantalla y necesidades de diseño. Utilizando estas clases, los desarrolladores pueden crear interfaces adaptativas y consistentes sin esfuerzo adicional.

Clases de bordes

En Bootstrap, las clases de bordes permiten añadir, quitar y personalizar los bordes de los elementos de forma rápida y sencilla. Estas clases se utilizan para aplicar estilos de borde, definir el grosor, color, y el radio de los bordes sin necesidad de escribir CSS adicional. A continuación, se detallan las principales clases de bordes disponibles:

Añadir y quitar bordes

Para añadir o quitar bordes a un elemento, se utilizan las siguientes clases:

• border: Añade un borde a todos los lados del elemento.
• border-0: Elimina los bordes de todos los lados del elemento.
• border-top, border-end, border-bottom, border-start: Añaden un borde solo en el lado especificado.
• border-top-0, border-end-0, border-bottom-0, border-start-0: Eliminan el borde del lado especificado.

<div class="border mb-1">Borde en todos los lados</div>
<div class="border-0 mb-1">Sin borde</div>
<div class="border-top mb-1">Borde superior</div>
<div class="border-end mb-1">Borde derecho</div>
<div class="border-bottom mb-1">Borde inferior</div>
<div class="border-start">Borde izquierdo</div>

Grosor de los bordes

Bootstrap permite ajustar el grosor de los bordes mediante las siguientes clases:

• border-1: Borde de 1 píxel de grosor.
• border-2: Borde de 2 píxeles de grosor.
• border-3: Borde de 3 píxeles de grosor.
• border-4: Borde de 4 píxeles de grosor.
• border-5: Borde de 5 píxeles de grosor.

<div class="border border-1 m-1">Borde de 1 píxel</div>
<div class="border border-2 m-1">Borde de 2 píxeles</div>
<div class="border border-3 m-1">Borde de 3 píxeles</div>
<div class="border border-4 m-1">Borde de 4 píxeles</div>
<div class="border border-5 m-1">Borde de 5 píxeles</div>

Color de los bordes

Para cambiar el color de los bordes, Bootstrap ofrece una variedad de clases que corresponden a su paleta de colores:

• border-primary: Borde de color azul primario.
• border-secondary: Borde de color gris secundario.
• border-success: Borde de color verde.
• border-danger: Borde de color rojo.
• border-warning: Borde de color amarillo.
• border-info: Borde de color cian.
• border-light: Borde de color claro.
• border-dark: Borde de color oscuro.
• border-white: Borde de color blanco.

<div class="border border-primary m-1">Borde azul primario</div>
<div class="border border-secondary m-1">Borde gris secundario</div>
<div class="border border-success m-1">Borde verde</div>
<div class="border border-danger m-1">Borde rojo</div>
<div class="border border-warning m-1">Borde amarillo</div>
<div class="border border-info m-1">Borde cian</div>
<div class="border border-light m-1">Borde claro</div>
<div class="border border-dark m-1">Borde oscuro</div>
<div class="border border-white m-1">Borde blanco</div>

Redondeo de bordes

Bootstrap también incluye clases para redondear los bordes de los elementos:

• rounded: Bordes redondeados en todos los lados.
• rounded-top, rounded-end, rounded-bottom, rounded-start: Bordes redondeados solo en el lado especificado.
• rounded-circle: Bordes redondeados en forma de círculo.
• rounded-pill: Bordes redondeados en forma de píldora.
• rounded-0: Bordes sin redondear.

<div class="border rounded m-1">Bordes redondeados</div>
<div class="border rounded-top m-1">Bordes redondeados en la parte superior</div>
<div class="border rounded-end m-1">Bordes redondeados en el lado derecho</div>
<div class="border rounded-bottom m-1">Bordes redondeados en la parte inferior</div>
<div class="border rounded-start m-1">Bordes redondeados en el lado izquierdo</div>
<div class="border rounded-circle m-1">Bordes en forma de círculo</div>
<div class="border rounded-pill m-1">Bordes en forma de píldora</div>
<div class="border rounded-0 m-1">Bordes sin redondear</div>

Ejemplo combinado

A continuación, se presenta un ejemplo de cómo combinar varias clases de bordes para crear un estilo personalizado:

<div class="border border-3 border-primary rounded-pill p-3">
  Elemento con borde azul de 3 píxeles de grosor y bordes redondeados en forma de píldora
</div>

Las clases de bordes en Bootstrap proporcionan una manera eficiente y flexible de personalizar los bordes de los elementos, ofreciendo una amplia gama de opciones para ajustar su apariencia sin necesidad de escribir CSS adicional.

Clases de display

Las clases de display en Bootstrap permiten controlar cómo se muestran los elementos HTML en la página mediante el uso de clases predefinidas. Estas clases son útiles para ajustar la visibilidad y el comportamiento de los elementos en diferentes dispositivos y tamaños de pantalla sin necesidad de escribir CSS personalizado. A continuación, se detallan las principales clases de display disponibles:

• d-none: Oculta un elemento.

<div class="d-none">Este elemento está oculto</div>

• d-inline: Muestra un elemento como un elemento en línea.

<span class="d-inline">Elemento en línea</span>

• d-inline-block: Muestra un elemento como un bloque en línea.

<div class="d-inline-block">Bloque en línea</div>

• d-block: Muestra un elemento como un bloque.

<div class="d-block">Elemento en bloque</div>

• d-grid: Aplica el modelo de cuadrícula CSS Grid al elemento.

<div class="d-grid">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

• d-flex: Aplica el modelo de caja flexible (flexbox) al elemento.

<div class="d-flex">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

• d-inline-flex: Muestra un elemento como un bloque flexible en línea.

<div class="d-inline-flex">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

Clases de display adaptativas

Bootstrap también proporciona clases de display adaptativas que permiten cambiar el comportamiento de los elementos en función del tamaño de la pantalla. Estas clases siguen un formato que incluye el prefijo d- seguido del tamaño de pantalla (sm, md, lg, xl, xxl) y el valor de display. Por ejemplo:

• d-sm-none: Oculta un elemento en pantallas pequeñas y mayores.

<div class="d-sm-none">Oculto en pantallas pequeñas y mayores</div>

• d-md-block: Muestra un elemento como un bloque en pantallas medianas y mayores.

<div class="d-md-block">Bloque en pantallas medianas y mayores</div>

• d-lg-inline: Muestra un elemento como un elemento en línea en pantallas grandes y mayores.

<span class="d-lg-inline">En línea en pantallas grandes y mayores</span>

Ejemplos combinados

A continuación, se presentan algunos ejemplos que combinan varias clases de display para crear diseños adaptativos:

Ocultar un elemento en pantallas pequeñas y mostrarlo como un bloque en pantallas medianas y mayores:

<div class="d-none d-md-block">
  Visible solo en pantallas medianas y mayores
</div>

Mostrar un elemento como un bloque flexible en línea en pantallas grandes y mayores:

<div class="d-lg-inline-flex">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

Controlar el comportamiento de los elementos con flexbox en diferentes tamaños de pantalla:

<div class="d-flex d-md-none d-lg-flex">
  <div>Elemento 1</div>
  <div>Elemento 2</div>
</div>

Las clases de display en Bootstrap ofrecen una forma eficaz y flexible de controlar la visibilidad y el comportamiento de los elementos en una página web, permitiendo a los desarrolladores crear diseños adaptativos y adaptativos sin necesidad de escribir CSS adicional.

Clases de visibilidad

Las clases de visibilidad en Bootstrap permiten controlar la visibilidad de los elementos en función del tamaño de la pantalla. Estas clases son útiles para crear diseños adaptativos y ajustar la visibilidad de los componentes en diferentes dispositivos sin necesidad de escribir CSS personalizado.

Clases de visibilidad básicas

Bootstrap proporciona clases básicas que permiten mostrar u ocultar elementos de manera sencilla:

• .visible: Hace que un elemento sea visible.
• .invisible: Oculta un elemento, pero mantiene su espacio en el diseño.

<div class="visible">Este elemento es visible</div>
<div class="invisible">Este elemento está oculto, pero ocupa espacio</div>

Clases de visibilidad adaptativas

Para ajustar la visibilidad de los elementos según el tamaño de la pantalla, Bootstrap ofrece clases adaptativas. Estas clases siguen el formato visible o invisible seguido del tamaño de pantalla (sm, md, lg, xl, xxl). A continuación se detallan las clases disponibles:

.visible-sm: Hace visible un elemento solo en pantallas pequeñas (≥576px).

.visible-md: Hace visible un elemento solo en pantallas medianas (≥768px).

.visible-lg: Hace visible un elemento solo en pantallas grandes (≥992px).

.visible-xl: Hace visible un elemento solo en pantallas extra grandes (≥1200px).

.visible-xxl: Hace visible un elemento solo en pantallas extra extra grandes (≥1400px).

.invisible-sm: Oculta un elemento solo en pantallas pequeñas (≥576px).

.invisible-md: Oculta un elemento solo en pantallas medianas (≥768px).

.invisible-lg: Oculta un elemento solo en pantallas grandes (≥992px).

.invisible-xl: Oculta un elemento solo en pantallas extra grandes (≥1200px).

.invisible-xxl: Oculta un elemento solo en pantallas extra extra grandes (≥1400px).

<div class="visible-md">Visible solo en pantallas medianas y mayores</div>
<div class="invisible-lg">Oculto solo en pantallas grandes y mayores</div>

Ejemplos combinados

A continuación se presentan ejemplos que combinan varias clases de visibilidad para crear comportamientos adaptativos específicos:

Mostrar un elemento solo en pantallas pequeñas y medianas:

<div class="visible-sm visible-md invisible-lg invisible-xl invisible-xxl">
  Visible solo en pantallas pequeñas y medianas
</div>

Ocultar un elemento solo en pantallas medianas:

<div class="invisible-md visible-sm visible-lg visible-xl visible-xxl">
  Oculto solo en pantallas medianas
</div>

Mostrar un elemento en todas las pantallas excepto en pantallas pequeñas:

<div class="invisible-sm visible-md visible-lg visible-xl visible-xxl">
  Visible en todas las pantallas excepto en pantallas pequeñas
</div>

Las clases de visibilidad en Bootstrap proporcionan una forma eficiente y flexible de controlar la visibilidad de los elementos en diferentes tamaños de pantalla. Estas clases permiten a los desarrolladores crear interfaces adaptativas sin necesidad de escribir CSS adicional, mejorando así la experiencia del usuario en diversos dispositivos.

Clases de posicionamiento

Las clases de posicionamiento en Bootstrap proporcionan una manera fácil y eficiente de controlar la posición de los elementos dentro de una página web. Estas clases permiten aplicar reglas CSS de posicionamiento comunes sin necesidad de escribir CSS personalizado, facilitando la creación de diseños complejos. A continuación, se presentan las principales clases de posicionamiento disponibles:

Posicionamiento estático, relativo, absoluto, fijo y sticky

Bootstrap ofrece clases para aplicar diferentes tipos de posicionamiento a los elementos:

• position-static: Aplica posicionamiento estático (por defecto).

<div class="position-static">Elemento con posicionamiento estático</div>

• position-relative: Aplica posicionamiento relativo, permitiendo ajustar la posición del elemento en relación con su posición original.

<div class="position-relative" style="top: 10px; left: 10px;">
  Elemento con posicionamiento relativo
</div>

• position-absolute: Aplica posicionamiento absoluto, posicionando el elemento en relación con su contenedor más cercano que tenga posición relativa, absoluta o fija.

<div class="position-absolute" style="top: 0; right: 0;">
  Elemento con posicionamiento absoluto
</div>

• position-fixed: Aplica posicionamiento fijo, posicionando el elemento en relación con la ventana del navegador.

<div class="position-fixed" style="top: 0; left: 0;">
  Elemento con posicionamiento fijo
</div>

• position-sticky: Aplica posicionamiento sticky, permitiendo que el elemento se mantenga "pegado" a su posición cuando se desplaza dentro de su contenedor.

<div class="position-sticky" style="top: 0;">
  Elemento con posicionamiento sticky
</div>

Offset (desplazamiento)

Para ajustar la posición de los elementos posicionados de manera relativa, absoluta, fija o sticky, Bootstrap proporciona clases para aplicar desplazamientos. Estas clases incluyen top, right, bottom, left seguidos de un valor de desplazamiento.

• top-0: Desplaza el elemento a 0% desde la parte superior.
• top-50: Desplaza el elemento a 50% desde la parte superior.
• top-100: Desplaza el elemento a 100% desde la parte superior.
• start-0: Desplaza el elemento a 0% desde el inicio (izquierda en LTR, derecha en RTL).
• start-50: Desplaza el elemento a 50% desde el inicio.
• start-100: Desplaza el elemento a 100% desde el inicio.
• bottom-0: Desplaza el elemento a 0% desde la parte inferior.
• bottom-50: Desplaza el elemento a 50% desde la parte inferior.
• bottom-100: Desplaza el elemento a 100% desde la parte inferior.
• end-0: Desplaza el elemento a 0% desde el final (derecha en LTR, izquierda en RTL).
• end-50: Desplaza el elemento a 50% desde el final.
• end-100: Desplaza el elemento a 100% desde el final.

<div class="position-absolute top-0 start-0">Top 0, Start 0</div>
<div class="position-absolute top-50 start-50">Top 50, Start 50</div>
<div class="position-absolute bottom-0 end-0">Bottom 0, End 0</div>

Clases de traslación

Las clases de traslación permiten mover un elemento a lo largo de los ejes X e Y. Estas clases son útiles para ajustar la posición sin cambiar el flujo del documento.

• translate-middle: Centra el elemento en ambos ejes (X e Y).

<div class="position-absolute top-50 start-50 translate-middle">
  Centrado en ambos ejes
</div>

• translate-middle-x: Centra el elemento en el eje X.

<div class="position-absolute top-50 start-50 translate-middle-x">
  Centrado en el eje X
</div>

• translate-middle-y: Centra el elemento en el eje Y.

<div class="position-absolute top-50 start-50 translate-middle-y">
  Centrado en el eje Y
</div>

Ejemplos combinados

A continuación se presentan ejemplos que combinan varias clases de posicionamiento para crear diseños específicos:

Centrar un elemento en el viewport utilizando posicionamiento absoluto y traslación:

<div class="position-absolute top-50 start-50 translate-middle">
  Elemento centrado en el viewport
</div>

Crear una barra de navegación fija en la parte superior de la pantalla:

<nav class="navbar position-fixed top-0 start-0 w-100">
  Barra de navegación fija
</nav>

Posicionar un botón en la parte inferior derecha de su contenedor:

<div class="position-relative" style="height: 200px;">
  <button class="btn btn-primary position-absolute bottom-0 end-0">Botón</button>
</div>

Las clases de posicionamiento en Bootstrap proporcionan una forma flexible y eficiente de controlar la disposición de los elementos en una página web, permitiendo a los desarrolladores crear diseños complejos sin necesidad de escribir CSS adicional.

Clases de interactividad

Las clases de interactividad en Bootstrap permiten a los desarrolladores controlar y mejorar la interacción del usuario con los elementos de una página web. Estas clases proporcionan una forma sencilla de habilitar o deshabilitar elementos, gestionar el comportamiento de los enlaces y formularios, y controlar la selección de texto y el uso del puntero. A continuación, se detallan las principales clases de interactividad disponibles en Bootstrap:

Deshabilitar elementos

Para deshabilitar elementos interactivos como botones, enlaces y formularios, Bootstrap ofrece la clase disabled. Esta clase se puede aplicar directamente a los elementos o a sus contenedores para deshabilitar todos los elementos hijos. Algunos elementos requerirán de JavaScript para deshabilitarlos por completo.

• Deshabilitar un botón:

<button class="btn btn-primary disabled" aria-disabled="true">Botón deshabilitado</button>

• Deshabilitar un enlace:

<a href="#" class="btn btn-secondary disabled" tabindex="-1" aria-disabled="true">Enlace deshabilitado</a>

Control de puntero

Para gestionar el comportamiento del puntero del ratón sobre los elementos, Bootstrap proporciona la clase pe-none para desactivar los eventos del puntero y pe-auto para activarlos.

• Desactivar eventos del puntero:

<div class="pe-none">
  <button class="btn btn-warning">Sin eventos del puntero</button>
</div>

• Activar eventos del puntero:

<div class="pe-auto">
  <button class="btn btn-success">Con eventos del puntero</button>
</div>

Selección de texto

Las clases para controlar la selección de texto permiten habilitar o deshabilitar la capacidad del usuario para seleccionar texto en un elemento.

• Deshabilitar selección de texto:

<p class="user-select-none">Este texto no se puede seleccionar.</p>

• Habilitar selección de texto:

<p class="user-select-auto">Este texto se puede seleccionar.</p>

• Habilitar selección de texto en todos los elementos:

<div class="user-select-all">
  <p>Este texto se puede seleccionar completamente.</p>
</div>

Clases de interactividad combinadas

A continuación, se presentan ejemplos que combinan varias clases de interactividad para crear comportamientos específicos:

• Deshabilitar parte de un formulario:

<form>
  <div class="mb-3">
    <label for="inputEmail" class="form-label">Correo electrónico</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="nombre@ejemplo.com">
  </div>
  <div class="mb-3">
    <label for="inputPassword" class="form-label">Contraseña</label>
    <input type="password" class="form-control" id="inputPassword" placeholder="Contraseña" disabled>
  </div>
  <button type="submit" class="btn btn-primary disabled" aria-disabled="true">Enviar</button>
</form>

• Controlar la selección de texto y eventos del puntero:

<div class="user-select-none pe-none">
  <p>Este texto no se puede seleccionar y no responde a los eventos del puntero.</p>
</div>
<div class="user-select-auto pe-auto">
  <p>Este texto se puede seleccionar y responde a los eventos del puntero.</p>
</div>

Las clases de interactividad en Bootstrap permiten un control granular sobre cómo los usuarios interactúan con los elementos de una página web, mejorando así la experiencia del usuario y la accesibilidad del contenido. Estas clases ofrecen soluciones rápidas y eficientes para manejar la interactividad sin necesidad de escribir CSS adicional.