Tipografía y texto
En esta sección veremos cómo podemos utilizar las funcionalidades que nos ofrece Bootstrap sobre tipografía y texto.
Alineación del Texto (Text Alignment)
Bootstrap usa las direcciones lógicas (Start/End) en lugar de Izquierda/Derecha.
- text-start: Alineado a la izquierda (por defecto).
- text-center: Centrado.
- text-end: Alineado a la derecha.
Puedes cambiar la alineación según el dispositivo. text-center text-lg-start: "Céntralo en móviles, pero alinéalo a la izquierda en pantallas grandes".
Peso y Estilo (Weight y Style)
Para poner negritas o cursivas. Las clases empiezan por fw (font-weight) o fst (font-style).
- fw-bold: Negrita fuerte (700).
- fw-semibold: Seminegrita (600) - Muy útil para títulos modernos.
- fw-normal: Peso normal (400).
- fw-light: Letra fina (300).
- fst-italic: Cursiva.
Transformación (Transform)
Para cambiar mayúsculas y minúsculas sin reescribir el texto en el HTML.
- text-uppercase: TODO EN MAYÚSCULAS.
- text-lowercase: todo en minúsculas.
- text-capitalize: La Primera Letra De Cada Palabra.
Tamaño y Jerarquía (Size)
Aquí hay dos conceptos clave: Clases de Encabezado y Display Headings
Clases .h1 a .h6
Podemos hacer que un párrafo <p> se vea como un título <h1> visualmente, sin afectar al SEO
<p class="h1">Párrafo gigante</p>
<p class="h3">Párrafo mediano</p>Display Headings (Títulos gigantes)
Cuando necesitas un título de portada ("Fullstack") que sea enorme pero más fino y elegante que un h1 normal.
- display-1 (El más gigante).
- ...
- display-6 (El más pequeño de los grandes).
Lead y small
Decoración y Reset
Para trabajar con la decoración del texto tenemos estas utilities.
- text-decoration-none: Esencial. Quita el subrayado a los enlaces (<a>). Muy usado cuando conviertes enlaces en botones o tarjetas clicables.
- text-decoration-underline: Fuerza el subrayado.
- text-decoration-line-through: Texto tachado (ej. precios antiguos: ~~50€~~).
Truncamiento (Text Truncate)
Esta utilidad es una maravilla para tarjetas de noticias o productos. Si el texto es demasiado largo para una línea, Bootstrap lo corta y añade "..." automáticamente.
<div class="text-truncate" style="width: 150px;">
Este es un texto demasiado largo para caber aquí.
</div>Altura de Línea (Line Height)
Para las veces que el texto se ve muy apretado o muy separado, lo podemos solventar con line height.
- lh-1: Altura mínima (las líneas casi se tocan). Ideal para títulos grandes display.
- lh-sm: Pequeña.
- lh-base: Normal.
- lh-lg: Grande (mucho aire entre líneas). Mejora la lectura en párrafos largos.