Bootstrap 5: componentes

Además de la rejilla, Bootstrap incluye estilos y componentes listos para usar. Aquí tienes los más habituales. Para todos los demás, y para copiar el código completo, la referencia es la documentación oficial en getbootstrap.com.

Botones

La clase btn se añade a <button>, <a> o <input>, junto con un color:

<button type="button" class="btn btn-primary">Guardar</button>
<button type="button" class="btn btn-outline-secondary">Cancelar</button>
<button type="button" class="btn btn-danger">Eliminar</button>
<a href="/registro" class="btn btn-success btn-lg">Crear cuenta</a>
<button type="button" class="btn btn-link">Más información</button>

• Colores: btn-primary, btn-secondary, btn-success, btn-danger, btn-warning, btn-info, btn-light, btn-dark, btn-link.
• Versión con solo borde: btn-outline-primary, etc.
• Tamaños: btn-sm y btn-lg.

Clase disabled frente a atributo disabled: la clase solo cambia el aspecto; el botón sigue funcionando. Para desactivarlo de verdad, usa el atributo: <button class="btn btn-primary" disabled>. En un enlace, que no admite el atributo, añade aria-disabled="true" y tabindex="-1" además de la clase.

Imágenes

<img src="foto.jpg" class="img-fluid" alt="...">       <!-- se adapta al ancho disponible -->
<img src="foto.jpg" class="rounded" alt="...">         <!-- esquinas redondeadas -->
<img src="avatar.jpg" class="rounded-circle" alt="..."> <!-- circular -->
<img src="foto.jpg" class="img-thumbnail" alt="...">   <!-- con marco -->
<img src="logo.png" class="d-block mx-auto" alt="..."> <!-- centrada -->

img-fluid es la más útil: la imagen nunca se sale de su columna y se reduce en pantallas pequeñas.

Tablas

<table class="table table-striped table-hover">
  <thead>
    <tr><th>Curso</th><th>Lecciones</th></tr>
  </thead>
  <tbody>
    <tr><td>HTML</td><td>16</td></tr>
    <tr><td>CSS</td><td>16</td></tr>
  </tbody>
</table>

Variantes: table-striped (filas alternas), table-hover (resalta al pasar el ratón), table-bordered, table-sm (compacta), table-dark. Envuelve la tabla en <div class="table-responsive"> para que se pueda desplazar en el móvil.

Tarjetas (cards)

Una caja con cabecera, cuerpo y pie opcionales. Ideal para productos, artículos o perfiles:

<div class="card">
  <img src="curso-html.jpg" class="card-img-top" alt="Portada del curso de HTML">
  <div class="card-body">
    <h5 class="card-title">Curso de HTML</h5>
    <p class="card-text">Aprende a estructurar páginas web desde cero.</p>
    <a href="/html/" class="btn btn-primary">Ver curso</a>
  </div>
  <div class="card-footer text-body-secondary">16 lecciones</div>
</div>

Combinadas con la rejilla (row + col-md-4) tienes una galería de tarjetas responsive en minutos.

Formularios

Bootstrap da estilo a los formularios con unas pocas clases:

<form>
  <div class="mb-3">
    <label for="email" class="form-label">Email</label>
    <input type="email" class="form-control" id="email" name="email">
    <div class="form-text">Nunca compartiremos tu email.</div>
  </div>

  <div class="mb-3">
    <label for="curso" class="form-label">Curso</label>
    <select class="form-select" id="curso" name="curso">
      <option>HTML</option>
      <option>CSS</option>
    </select>
  </div>

  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="acepto" name="acepto">
    <label class="form-check-label" for="acepto">Acepto las condiciones</label>
  </div>

  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

• form-label en los <label>, que son obligatorios.
• form-control en <input> y <textarea>; form-select en <select>.
• Casillas y radios: un div.form-check con form-check-input y form-check-label.
• mb-3 separa cada grupo del siguiente.
• Para poner campos en columnas, usa la rejilla dentro del formulario.

Barra de navegación

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container">
    <a class="navbar-brand" href="/">DevSchool</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#menu" aria-controls="menu" aria-expanded="false"
            aria-label="Abrir el menú">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" aria-current="page" href="/">Inicio</a></li>
        <li class="nav-item"><a class="nav-link" href="/cursos">Cursos</a></li>
      </ul>
    </div>
  </div>
</nav>

navbar-expand-lg hace que en pantallas grandes se vea el menú completo y en las pequeñas aparezca el botón de “hamburguesa”. Necesita el JavaScript de Bootstrap.

Otros componentes útiles

• Alertas: <div class="alert alert-success" role="alert">Guardado</div>.
• Insignias: <span class="badge text-bg-danger">3</span>.
• Modales: ventanas emergentes que se abren con data-bs-toggle="modal".
• Acordeón: secciones que se despliegan y pliegan (preguntas frecuentes).
• Carrusel: un pase de fotos. Todas las imágenes deberían tener la misma proporción para que no salte de altura. Úsalo con moderación: la gente rara vez pasa de la primera foto.

Los componentes interactivos (menú, modal, acordeón, carrusel) funcionan con atributos data-bs-*, sin escribir JavaScript, siempre que hayas cargado bootstrap.bundle.min.js.

Personalizar el aspecto

Para que tu web no parezca “otra web con Bootstrap”, como mínimo cambia el color principal y la tipografía. Hay dos niveles:

1. Variables CSS (sin herramientas extra). Bootstrap 5.3 expone muchas variables. Las globales afectan al texto, los enlaces y las utilidades de color; cada componente tiene además las suyas:

:root {
  --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
  --bs-link-color-rgb: 196, 127, 0;
}

.btn-primary {
  --bs-btn-bg: #c47f00;
  --bs-btn-border-color: #c47f00;
  --bs-btn-hover-bg: #a86c00;
  --bs-btn-hover-border-color: #a86c00;
}

Carga este CSS después del de Bootstrap.

2. Sass (para cambios profundos). Si instalas Bootstrap con npm, puedes cambiar sus variables de Sass ($primary, $font-family-base, $border-radius…) y recompilarlo. Así cambia el color principal en todos los componentes a la vez. Es la forma que se usa en proyectos profesionales.