Tema 5 · Tipografía y Texto

Tipografía, Encabezados Display y Párrafos

Aprende las utilidades tipográficas de Bootstrap 5: encabezados semánticos de h1 a h6, encabezados gigantes display, párrafos lead, alineación de texto y citas blockquote.

Alineación, Desplazamiento y Orden en Grid Paleta Temática y Fondos de Bootstrap

Encabezados y Clases de Tamaño Semántico

Bootstrap 5 establece una escala tipográfica coherente para todos los encabezados HTML de <h1> a <h6>. Además, provee clases como .h1 a .h6 para cuando necesitas que un elemento (como un <p> o <span>) tenga el tamaño de un encabezado sin perder su semántica estructural. 

<!-- Párrafo común estilizado visualmente como un h2 -->
<p class="h2">Texto con apariencia de h2</p>

Encabezados Gigantes: Clases .display-*

Para portadas, banners publicitarios o héroes (hero sections) donde los encabezados convencionales resultan demasiado discretos, Bootstrap incluye 6 clases .display-1 a .display-6:

Clase Peso y Escala Uso Habitual
.display-1 a .display-3 Tamaños masivos (5rem a 4rem) con trazo ligero. Títulos principales de landing pages y estadísticas de impacto numérico.
.display-4 a .display-6 Tamaños grandes (3.5rem a 2.5rem). Encabezados de sección y títulos de bienvenida de panel.

Párrafos Destacados y Utilidades de Texto

  • .lead: Aumenta sutilmente el tamaño de fuente y la separación de línea para el primer párrafo introductorio de un artículo.
  • .text-muted / .text-body-secondary: Texto atenuado para notas al pie, fechas o subtítulos secundarios.
  • .text-start, .text-center, .text-end: Alineación horizontal izquierda, centro o derecha.
  • .text-uppercase, .text-lowercase, .text-capitalize: Transformación de mayúsculas/minúsculas.
  • .blockquote & .blockquote-footer: Citas bibliográficas estilizadas.

⚡ Composición Tipográfica con Bootstrap 5

Aprende cómo las clases display-4, lead, text-muted y blockquote estructuran la jerarquía de lectura en una nota editorial:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Tipografía Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light p-4">

  <div class="container" style="max-width: 720px;">
    <!-- Encabezado Display Gigante -->
    <h1 class="display-5 fw-bold text-dark mb-2">
      Kilopolis Academia
    </h1>

    <p class="lead text-primary fw-medium mb-3">
      El entorno interactivo para dominar el desarrollo fullstack con estándares internacionales.
    </p>

    <p class="text-secondary mb-4" style="line-height: 1.7;">
      Bootstrap 5 optimiza la legibilidad tipográfica en cualquier resolución. Con clases utilitarias como <code class="text-dark">.lead</code> y <code class="text-dark">.text-body-secondary</code>, puedes jerarquizar artículos editoriales sin redactar reglas CSS personalizadas.
    </p>

    <!-- Cita destacada blockquote -->
    <figure class="p-3 bg-white border-start border-4 border-primary rounded-end shadow-sm mb-4">
      <blockquote class="blockquote mb-2">
        <p class="fs-6 fst-italic text-dark mb-0">
          «La simplicidad es la máxima sofisticación en el diseño de interfaces web.»
        </p>
      </blockquote>
      <figcaption class="blockquote-footer mb-0">
        Leonardo da Vinci en <cite title="Kilopolis Pensamiento">Kilopolis Formación</cite>
      </figcaption>
    </figure>

    <!-- Utilidades de alineación -->
    <div class="d-flex justify-content-between text-muted small border-top pt-2">
      <span>Publicado: 2026</span>
      <span class="text-uppercase fw-semibold text-success">Verificado W3C</span>
    </div>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de Bootstrap 5.3 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.