Veamos las clases para dar estilo a los textos en Bootstrap 5. El estilo de texto es un aspecto esencial para lograr un diseño atractivo y legible en tus páginas web. Afortunadamente, Bootstrap proporciona una amplia variedad de clases que te permiten personalizar fácilmente la apariencia del texto según tus necesidades. Estas clases te permiten cambiar el color del texto, ajustar su tamaño, alineación, opacidad y más.
8. Clases para dar estilo a textos en Bootstrap 5
Bootstrap 5 incluye estilos predefinidos para las etiquetas HTML5, lo que te permite crear rápidamente páginas web con un aspecto consistente y atractivo. Veamos cómo se ven en Bootstrap 5 algunas de las etiquetas HTML5 relacionadas con los textos.
Puedes experimentar con estas etiquetas y con otras que se te ocurran en tu proyecto de Bootstrap 5 para ver cómo se ven con los estilos predefinidos de Bootstrap. También puedes personalizar estos estilos escribiendo tu propio CSS. Al final de cada sección se puede ver un ejemplo visual de todas las etiquetas y clases que vamos a ir viendo.
Encabezados <h1> – <h6>: Bootstrap 5 incluye estilos predefinidos para los encabezados (<h1> a <h6>) que te permiten crear títulos y subtítulos con un aspecto consistente y atractivo. Los encabezados en Bootstrap tienen un tamaño y espaciado predefinidos, y utilizan la fuente del sistema por defecto. Ejemplo:
<h1>Encabezado 1</h1> <h2>Encabezado 2</h2>
Etiqueta <small>: crea un texto secundario más claro en cualquier encabezado. Ejemplo:
<h1>h1 Encabezado <small>texto secundario</small></h1>
Etiqueta <mark>: es representada con un color de fondo amarillo y algo de relleno. Ejemplo:
<p>Párrafo con <mark>etiqueta de marcado</mark> en un texto.</p>
Etiqueta <abbr>: es representada mediante un borde inferior punteado. Ejemplo:
<p>Esto es una etiqueta <abbr title="La etiqueta abbr se representa con un borde inferior punteado">abbr</abbr> en Bootstrap.</p>
Etiqueta <blockquote>: agregando la clase .blockquote a <blockquote> obtenemos un estilo personalizado. Ejemplo:
<blockquote class="blockquote"> <p>Un buen desarrollador de software trabaja con disciplina y constancia desde el primer día.</p> <footer class="blockquote-footer">Omar Bradley</footer> </blockquote>
Bootstrap 5 ofrece una amplia variedad de utilidades para controlar el texto, como la alineación, el ajuste de línea, el tamaño, etc. Algunas de las utilidades de texto son las siguientes.
| Clase | Descripción |
|---|---|
.h* | Definir encabezados con el mismo estilo que los encabezados predefinidos h1, h2… Utiliza .h1 hasta .h6. |
.display-* | Definir encabezados de mayor tamaño. Utiliza tamaños desde .display-1 (el más grande) hasta .display-6 (el más pequeño). |
.text-start | Alinea el texto al inicio del elemento. |
.text-center | Alinea el texto al centro del elemento. |
.text-end | Alinea el texto al final del elemento. |
.text-wrap | Ajusta el texto dentro del elemento para que se ajuste al ancho del contenedor. |
.text-nowrap | Evita que el texto se ajuste y desborde del contenedor. |
.text-break | Evita que cadenas largas de texto rompan el diseño de tus componentes. |
.text-lowercase | Transforma el texto a minúsculas. |
.text-uppercase | Transforma el texto a mayúsculas. |
.text-capitalize | Transforma el texto con la primera letra en mayúscula. |
.fs-* | Cambia el tamaño de la fuente del texto. Utiliza tamaños desde fs-1 (el más grande) hasta fs-6 (el más pequeño). |
.fw-* | Cambia el peso o densidad del trazo de la fuente del texto. Utiliza pesos desde .fw-light (el más ligero) hasta .fw-bold (el más pesado). También puedes utilizar .fw-normal para restablecer el peso de la fuente al valor por defecto. |
.fst-* | Cambia el estilo de la fuente del texto. Utiliza .fst-italic para aplicar un estilo cursivo al texto y .fst-normal para restablecer el estilo de la fuente al valor por defecto. |
8.1. Clases h1, h2, h3…
Bootstrap nos ofrece diferentes clases para crear encabezados con los mismos estilos que otros encabezados h1, h2, h3… Las clases son .h1 , .h2 … hasta .h6.
<h1 class="h2">Encabezado h1 con estilo h2</h1>
8.2. Clase display-x
Bootstrap nos ofrece diferentes clases para crear encabezados de mayor tamaño. Hay seis clases: .display-1 , .display-2 … hasta .display-6.
<h1 class="display-1">Encabezado Display-1</h1>
8.3. Alineación de textos
Puedes utilizar las clases .text-start, .text-center y .text-end para alinear el texto al inicio, centro o final del elemento, respectivamente. También hay clases responsivas disponibles que utilizan los mismos puntos de interrupción que el sistema de rejilla.
<p class="text-start">Texto alineado a la izquierda</p> <p class="text-center">Texto centrado</p> <p class="text-end">Texto alineado a la derecha</p>
8.4. Ajuste de línea y desbordamiento
Puedes utilizar la clase .text-wrap para ajustar el texto dentro del elemento y la clase .text-nowrap para evitar que el texto se ajuste. También puedes utilizar la clase .text-break para evitar que cadenas largas de texto rompan el diseño de tus componentes.
<p class="text-wrap">Texto con text-wrap: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<p class="text-nowrap">Texto con text-nowrap: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
<div class="container">
<p class="text-break">
Texto con text-break: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
8.5. Transformación de texto
Puedes utilizar las clases .text-lowercase, .text-uppercase y .text-capitalize para transformar el texto en minúsculas, mayúsculas o con la primera letra en mayúscula, respectivamente.
<p class="text-lowercase">Transformación de texto: text-lowercase</p> <p class="text-uppercase">Transformación de texto: text-uppercase</p> <p class="text-capitalize">Transformación de texto: text-capitalize</p>
8.6. Tamaño de fuente de los textos
Puedes utilizar las clases .fs-* para cambiar el tamaño de la fuente del texto. Hay clases disponibles para tamaños desde fs-1 (el más grande) hasta fs-6 (el más pequeño).
<p class="fs-1">Tamaño de fuente fs-1</p> <p class="fs-2">Tamaño de fuente fs-2</p> <p class="fs-3">Tamaño de fuente fs-3</p> <p class="fs-4">Tamaño de fuente fs-4</p> <p class="fs-5">Tamaño de fuente fs-5</p> <p class="fs-6">Tamaño de fuente fs-6</p>
8.7. Densidad del trazo y estilo de la fuente
Densidad del trazo de la fuente: puedes utilizar las clases .fw-* para cambiar el peso o densidad del trazo de la fuente del texto. Hay clases disponibles para pesos desde fw-light (el más ligero) hasta fw-bold (el más pesado). También puedes utilizar la clase .fw-normal para restablecer el peso de la fuente al valor por defecto.
<p class="fw-normal">Densidad del trazo de la fuente fw-normal</p> <p class="fw-light">Densidad del trazo de la fuente fw-light</p> <p class="fw-bold">Densidad del trazo de la fuente fw-bold</p>
Estilo de la fuente: puedes utilizar las clases .fst-* para cambiar el estilo de la fuente del texto. Por ejemplo, puedes utilizar la clase .fst-italic para aplicar un estilo cursivo al texto. También puedes utilizar la clase .fst-normal para restablecer el estilo de la fuente al valor por defecto.
<p class="fst-italic">Estilo de la fuente fst-italic</p>
Ejemplos
8.8. Colores de texto
Algunas de las clases para los colores del texto son: .text-primary, .text-secondary, .text-muted, .text-success, .text-danger, .text-warning, .text-info, .text-white, .text-dark y .text-light. También puedes agregar una opacidad del 50% para texto en negro o blanco con las clases .text-black-50 o .text-white-50.
| Clase | Descripción |
|---|---|
.text-primary | Color de texto primario (azul) |
.text-secondary | Color de texto secundario (gris) |
.text-muted | Color de texto tenue o deshabilitado |
.text-success | Color de texto para indicar éxito (verde) |
.text-danger | Color de texto para indicar peligro (rojo) |
.text-warning | Color de texto para indicar advertencia (amarillo) |
.text-info | Color de texto para información (azul claro) |
.text-white | Color de texto blanco |
.text-dark | Color de texto oscuro |
.text-light | Color de texto claro (gris claro) |
.text-black-50 | Texto negro con opacidad del 50% |
.text-white-50 | Texto blanco con opacidad del 50% |
Veamos diferentes ejemplos:
<p class="text-primary">.text-primary</p> <p class="text-secondary">.text-secondary</p> <p class="text-success">.text-success</p> <p class="text-danger">.text-danger</p> <p class="text-warning bg-dark">.text-warning</p> <p class="text-info bg-dark">.text-info</p> <p class="text-light bg-dark">.text-light</p> <p class="text-dark">.text-dark</p> <p class="text-body">.text-body</p> <p class="text-muted">.text-muted</p> <p class="text-white bg-dark">.text-white</p> <p class="text-black-50">.text-black-50</p> <p class="text-white-50 bg-dark">.text-white-50</p>
Las clases anteriores también se pueden usar en enlaces, pero es mejor usar la clase específica para enlaces .link-{nombrecolor} porque así tendrán predefinido un color más oscuro al hacer :hover con el ratón.
<a href="#" class="link-primary">link-primary: Enlace</a> <a href="#" class="link-secondary">link-secondary: Enlace</a> <a href="#" class="link-success">link-success: Enlace</a> <a href="#" class="link-danger">link-danger: Enlace</a> <a href="#" class="link-warning">link-danger: Enlace</a> <a href="#" class="link-info">link-danger: Enlace</a> <a href="#" class="link-light">link-danger: Enlace</a> <a href="#" class="link-dark">link-danger: Enlace</a>
Ejemplos
8.9. Colores de fondo en los textos
Alguna de las clases de colores de fondo son: .bg-primary , .bg-success , .bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark y .bg-light.
Cuando utilizamos los colores de fondo es muy usual combinarlo junto con las clases de los colores de texto para configurar un buen contraste entre ellos.
Aunque las clases anteriores funcionan con los textos, es recomendable utilizar la clase .text-bg-{color}
<p class="p-2 text-bg-primary">text-bg-primary</p> <p class="p-2 text-bg-secondary">text-bg-secondary</p> <p class="p-2 text-bg-success">text-bg-success</p> <p class="p-2 text-bg-danger">text-bg-danger</p> <p class="p-2 text-bg-warning">text-bg-warning</p> <p class="p-2 text-bg-info">text-bg-info</p> <p class="p-2 text-bg-light">text-bg-light</p> <p class="p-2 text-bg-dark">text-bg-dark</p>
Ejemplos
8.10. Badges o insignias
Las insignias (badges) son pequeños componentes de Bootstrap utilizados para añadir números, etiquetas y marcas a otros elementos. Para crear una insignia debemos utilizar la clase .badge junto con otras clases para darle estilo.
Las insignias se adaptan al tamaño del elemento padre. Ejemplos:
<h1>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h1> <h2>Encabezado de ejemplo <span class="badge bg-secondary">Nuevo</span></h2>
Las insignias también pueden usarse como parte de enlaces o botones para proporcionar un contador.
<button type="button" class="btn btn-primary"> Notificaciones <span class="badge bg-light text-black">4</span> </button>
Nota de Accesibilidad: Las insignias pueden ser confusas para usuarios de lectores de pantalla y tecnologías similares. Considera incluir contexto adicional con un texto adicional oculto visualmente para estos usuarios. Ejemplo con texto adicional:
<button type="button" class="btn btn-primary"> Perfil <span class="badge bg-light text-black">9</span> <span class="sr-only">mensajes sin leer</span> </button>
Variantes contextuales
Agrega clases modificadoras para cambiar la apariencia de una insignia. Ejemplos:
<span class="badge bg-primary">Primario</span> <span class="badge bg-success">Éxito</span> <span class="badge bg-danger">Peligro</span>
Insignias en forma de píldora
Usa la clase .badge-pill para redondear más las insignias (con un radio de borde más grande y un relleno horizontal adicional).
Insignias como enlaces
Usa las clases contextuales .badge-* en un elemento <a> para proporcionar insignias accionables con estados de hover y focus. Ejemplos:
<a href="#" class="badge bg-primary">Primario</a> <a href="#" class="badge bg-success">Éxito</a>
Ejemplos
Descubre cómo mejorar la presentación de datos y optimizar la usabilidad de tu sitio web en la siguiente sección del tutorial en la que vemos las clases para dar estilo a las tablas.