Tutorial Bootstrap: Componentes de Bootstrap

¿Qué son los componentes y cuántos hay en Bootstrap?

En Bootstrap, los componentes son bloques de construcción reutilizables que facilitan la creación de interfaces de usuario coherentes y visualmente atractivas. Estos componentes están predefinidos y optimizados para ser utilizados de manera rápida y eficiente, permitiendo a los desarrolladores centrarse en la lógica de la aplicación en lugar de en el diseño desde cero.

Bootstrap incluye una amplia gama de componentes, cada uno diseñado para abordar diferentes necesidades de interfaz de usuario. A continuación, se detalla una lista no exhaustiva de los principales componentes disponibles en esta versión:

• Accordions: Proporcionan una forma de mostrar y ocultar contenido en secciones plegables.

<div class="accordion" id="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Ítem de acordeón #1
        </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
        <div class="accordion-body">
            Este es el primer contenido del acordeón.
        </div>
        </div>
    </div>
</div>

• Alerts: Utilizados para mostrar mensajes de advertencia y notificaciones.

<div class="alert alert-warning" role="alert">
    Este es un mensaje de advertencia.
</div>

• Badges: Pequeños contenedores de texto que se utilizan para mostrar contadores y etiquetas.

<span class="badge bg-primary">Nuevo</span>

• Breadcrumbs: Indicadores de navegación que muestran la ruta de navegación actual.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Inicio</a></li>
        <li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
        <li class="breadcrumb-item active" aria-current="page">Datos</li>
    </ol>
</nav>

• Buttons: Botones estilizados con diferentes variantes y tamaños.

<button type="button" class="btn btn-primary">Botón primario</button>

• Cards: Contenedores flexibles y extensibles para mostrar contenido variado.

<div class="card" style="width: 18rem;">
    <img src="imagen.jpg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Texto de ejemplo para la tarjeta.</p>
        <a href="#" class="btn btn-primary">Ir a algún lugar</a>
    </div>
</div>

• Carousels: Contenedores para crear carruseles de imágenes o contenido.

<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
        <img src="imagen.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="imagen.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
        <img src="imagen.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Anterior</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Siguiente</span>
    </button>
</div>

• Collapse: Permite mostrar y ocultar contenido con animaciones.

<p>
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
        Enlace con collapse
    </a>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        Este es un contenido colapsable.
    </div>
</div>

• Dropdowns: Menús desplegables que permiten seleccionar opciones.

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Menú desplegable
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Acción</a></li>
        <li><a class="dropdown-item" href="#">Otra acción</a></li>
        <li><a class="dropdown-item" href="#">Algo más aquí</a></li>
    </ul>
</div>

• List groups: Listas estilizadas que pueden contener texto, enlaces, botones, etc.

<ul class="list-group">
    <li class="list-group-item active" aria-current="true">Un ítem</li>
    <li class="list-group-item">Un segundo ítem</li>
    <li class="list-group-item">Un tercer ítem</li>
    <li class="list-group-item">Un cuarto ítem</li>
    <li class="list-group-item">Y un quinto</li>
</ul>

• Modals: Ventanas modales para mostrar contenido sobre la página actual.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Lanzar demo del modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Título del modal</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            Contenido del modal...
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Guardar cambios</button>
        </div>
        </div>
    </div>
</div>

• Navs: Contenedores para crear barras de navegación.

<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Activo</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deshabilitado</a>
    </li>
</ul>

• Navbars: Barras de navegación adaptativas.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Características</a>
            </li>
            <li class="nav-item">
            <a class="nav-link" href="#">Precios</a>
            </li>
            <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deshabilitado</a>
            </li>
        </ul>
        </div>
    </div>
</nav>

• Pagination: Paginadores para dividir contenido en páginas.

<nav aria-label="Page navigation example">
    <ul class="pagination">
        <li class="page-item"><a class="page-link" href="#">Anterior</a></li>
        <li class="page-item"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">3</a></li>
        <li class="page-item"><a class="page-link" href="#">Siguiente</a></li>
    </ul>
</nav>

• Popovers: Pequeñas ventanas emergentes que muestran información adicional.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">
Haz clic para activar el popover
</button>

• Progress: Barras de progreso para indicar el estado de una operación.

<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

• Spinners: Indicadores de carga.

<div class="spinner-border" role="status">
    <span class="visually-hidden">Cargando...</span>
</div>

• Toasts: Mensajes de notificación temporales.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
        <img src="imagen.jpg" class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">11 mins ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
        Este es un mensaje de toast.
    </div>
</div>

Estos componentes no solo son personalizables mediante clases de utilidad de Bootstrap, sino que también pueden ser extendidos y combinados para crear interfaces de usuario complejas y dinámicas. La documentación oficial de Bootstrap proporciona ejemplos detallados y opciones de configuración para cada uno de estos componentes, lo que facilita su integración en cualquier proyecto web.

Botones y badges en Bootstrap

Bootstrap ofrece una amplia variedad de opciones para crear botones y badges, elementos fundamentales para la interacción del usuario y la visualización de información adicional en las interfaces.

Los botones en Bootstrap se estilizan principalmente utilizando la clase .btn junto con una serie de clases adicionales que determinan el color, el tamaño y otras propiedades del botón. A continuación se presentan algunos ejemplos y configuraciones comunes de botones:

• Botones básicos: Para crear un botón básico, se utiliza la clase .btn junto con una clase de color como .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark, o .btn-link.

<button type="button" class="btn btn-primary m-1">Botón primario</button>
<button type="button" class="btn btn-secondary m-1">Botón secundario</button>
<button type="button" class="btn btn-success m-1">Botón de éxito</button>
<button type="button" class="btn btn-danger m-1">Botón de peligro</button>
<button type="button" class="btn btn-warning m-1">Botón de advertencia</button>
<button type="button" class="btn btn-info m-1">Botón de información</button>
<button type="button" class="btn btn-light m-1">Botón claro</button>
<button type="button" class="btn btn-dark m-1">Botón oscuro</button>
<button type="button" class="btn btn-link m-1">Botón de enlace</button>

• Botones de diferentes tamaños: Los botones pueden ajustarse en tamaño utilizando las clases .btn-lg para botones grandes, .btn-sm para botones pequeños, y sin clase adicional para el tamaño estándar.

<button type="button" class="btn btn-primary btn-lg m-1">Botón grande</button>
<button type="button" class="btn btn-secondary btn-sm m-1">Botón pequeño</button>
<button type="button" class="btn btn-success m-1">Botón estándar</button>

• Botones deshabilitados: Para deshabilitar un botón, se puede utilizar el atributo disabled o la clase .disabled.

<button type="button" class="btn btn-primary m-1" disabled>Botón deshabilitado</button>
<button type="button" class="btn btn-secondary disabled m-1">Botón deshabilitado</button>

• Botones con iconos: Bootstrap facilita la inclusión de iconos en los botones mediante el uso de librerías de iconos como Font Awesome o Bootstrap Icons.

<button type="button" class="btn btn-primary">
  <i class="bi bi-star-fill"></i> Botón con icono
</button>
<button type="button" class="btn btn-secondary">
  <i class="bi bi-heart"></i> Otro botón con icono
</button>

Los badges en Bootstrap son pequeños elementos de texto que se utilizan para mostrar contadores, etiquetas o estados. Se crean utilizando la clase .badge junto con clases de color similares a las de los botones.

• Badges básicos: Los badges se pueden aplicar a cualquier elemento en línea como <span> o <a>, y se estilizan con clases de color como .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light, .bg-dark.

<span class="badge bg-primary">Primario</span>
<span class="badge bg-secondary">Secundario</span>
<span class="badge bg-success">Éxito</span>
<span class="badge bg-danger">Peligro</span>
<span class="badge bg-warning">Advertencia</span>
<span class="badge bg-info">Información</span>
<span class="badge bg-light text-dark">Claro</span>
<span class="badge bg-dark">Oscuro</span>

• Badges en botones: Los badges pueden integrarse dentro de los botones para mostrar contadores u otra información relevante.

<button type="button" class="btn btn-primary">
  Notificaciones <span class="badge bg-danger">4</span>
</button>
<button type="button" class="btn btn-success">
  Mensajes <span class="badge bg-light text-dark">7</span>
</button>

• Badges pill: Para crear badges con bordes redondeados, se utiliza la clase .rounded-pill.

<span class="badge bg-primary rounded-pill">Primario</span>
<span class="badge bg-secondary rounded-pill">Secundario</span>

Estos elementos son esenciales para mejorar la usabilidad y el diseño de las interfaces de usuario, permitiendo una mayor interactividad y una visualización clara y concisa de la información. Bootstrap proporciona una forma sencilla y eficiente de implementar estos componentes con una amplia gama de opciones de personalización.

Tarjetas en Bootstrap

Las tarjetas en Bootstrap son contenedores flexibles y extensibles que permiten agrupar diversos tipos de contenido en un formato consistente y estéticamente agradable. Las tarjetas son altamente personalizables y pueden contener encabezados, cuerpos de texto, pies de página, imágenes, listas de grupos y más. A continuación se describen las principales características y ejemplos de uso de las tarjetas en Bootstrap.

• Estructura básica de una tarjeta: La estructura básica de una tarjeta incluye un contenedor principal con la clase .card, dentro del cual se pueden añadir diferentes elementos como encabezados, cuerpos y pies de página.

<div class="card" style="width: 18rem;">
  <img src="imagen.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Texto de ejemplo para la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

• Imágenes en tarjetas: Las imágenes se pueden incluir en las tarjetas utilizando la clase .card-img-top para imágenes en la parte superior y .card-img-bottom para imágenes en la parte inferior.

<div class="card" style="width: 18rem;">
  <img src="imagen.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Texto de ejemplo para la tarjeta con una imagen en la parte superior.</p>
  </div>
</div>

• Encabezados y pies de página en tarjetas: Los encabezados y pies de página se añaden utilizando las clases .card-header y .card-footer respectivamente.

<div class="card">
  <div class="card-header">
    Encabezado de la tarjeta
  </div>
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta</h5>
    <p class="card-text">Texto de ejemplo para el cuerpo de la tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
  <div class="card-footer text-muted">
    Pie de página de la tarjeta
  </div>
</div>

• Listas de grupos en tarjetas: Las tarjetas también pueden contener listas de grupos utilizando la clase .list-group.

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Encabezado de la tarjeta
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Elemento de la lista 1</li>
    <li class="list-group-item">Elemento de la lista 2</li>
    <li class="list-group-item">Elemento de la lista 3</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Enlace de la tarjeta</a>
    <a href="#" class="card-link">Otro enlace</a>
  </div>
</div>

• Tarjetas con navegación: Para incluir elementos de navegación dentro de una tarjeta, se pueden utilizar componentes de navegación de Bootstrap como .nav y .nav-item.

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Activo</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Enlace</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deshabilitado</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Título especial</h5>
    <p class="card-text">Con soporte de texto más largo.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>

• Tarjetas con variantes de color: Las tarjetas pueden tener diferentes variantes de color utilizando clases de utilidad como .bg-primary, .bg-secondary, .bg-success, etc.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Encabezado de la tarjeta</div>
  <div class="card-body">
    <h5 class="card-title">Título de la tarjeta primaria</h5>
    <p class="card-text">Texto de ejemplo para la tarjeta primaria.</p>
  </div>
</div>

• Tarjetas en cuadrícula: Bootstrap permite organizar tarjetas en una cuadrícula utilizando el sistema de rejilla. Esto es útil para crear layouts adaptativos.

<div class="row">
  <div class="col-sm-6 m-1">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Texto de ejemplo para el cuerpo de la tarjeta.</p>
        <a href="#" class="btn btn-primary">Ir a algún lugar</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6 m-1">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Título de la tarjeta</h5>
        <p class="card-text">Texto de ejemplo para el cuerpo de la tarjeta.</p>
        <a href="#" class="btn btn-primary">Ir a algún lugar</a>
      </div>
    </div>
  </div>
</div>

Las tarjetas son componentes extremadamente versátiles en Bootstrap que permiten a los desarrolladores crear interfaces de usuario complejas y visualmente atractivas con facilidad. La documentación oficial de Bootstrap proporciona más ejemplos y detalles sobre cómo personalizar y extender las tarjetas para satisfacer diversas necesidades de diseño y funcionalidad.

Tablas en Bootstrap

Bootstrap proporciona una serie de clases y utilidades que permiten estilizar y gestionar tablas de manera eficiente y adaptativa. Las tablas en Bootstrap se utilizan para mostrar datos tabulares de manera clara y organizada. A continuación, se detallan las principales características y ejemplos de uso de tablas en Bootstrap.

Para crear una tabla básica, se utiliza la clase .table en el elemento <table>. Esta clase aplica un diseño básico a la tabla, incluyendo bordes y espaciado entre las celdas.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primera</th>
      <th scope="col">Segunda</th>
      <th scope="col">Tercera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Celda 7</td>
      <td>Celda 8</td>
      <td>Celda 9</td>
    </tr>
  </tbody>
</table>

Para añadir bandas (striped rows) a la tabla, se utiliza la clase .table-striped. Esta clase alterna el color de fondo de las filas, mejorando la legibilidad de los datos.

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primera</th>
      <th scope="col">Segunda</th>
      <th scope="col">Tercera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Celda 7</td>
      <td>Celda 8</td>
      <td>Celda 9</td>
    </tr>
  </tbody>
</table>

Para añadir bordes a todas las celdas de la tabla, se utiliza la clase .table-bordered. Esta clase añade un borde alrededor de cada celda, proporcionando una separación visual más clara entre los datos.

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primera</th>
      <th scope="col">Segunda</th>
      <th scope="col">Tercera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Celda 7</td>
      <td>Celda 8</td>
      <td>Celda 9</td>
    </tr>
  </tbody>
</table>

Para hacer que la tabla sea más compacta, se utiliza la clase .table-sm. Esta clase reduce el padding dentro de las celdas, haciendo que la tabla ocupe menos espacio vertical.

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primera</th>
      <th scope="col">Segunda</th>
      <th scope="col">Tercera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Celda 7</td>
      <td>Celda 8</td>
      <td>Celda 9</td>
    </tr>
  </tbody>
</table>

Para hacer que la tabla sea adaptativa, se envuelve el elemento <table> en un contenedor con la clase .table-responsive. Esto permite que la tabla se desplace horizontalmente en dispositivos con pantallas pequeñas.

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Primera</th>
        <th scope="col">Segunda</th>
        <th scope="col">Tercera</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Celda 1</td>
        <td>Celda 2</td>
        <td>Celda 3</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Celda 4</td>
        <td>Celda 5</td>
        <td>Celda 6</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Celda 7</td>
        <td>Celda 8</td>
        <td>Celda 9</td>
      </tr>
    </tbody>
  </table>
</div>

Para resaltar una fila al pasar el cursor sobre ella, se utiliza la clase .table-hover. Esta clase añade un efecto de resaltado a las filas cuando el usuario pasa el ratón sobre ellas.

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primera</th>
      <th scope="col">Segunda</th>
      <th scope="col">Tercera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Celda 7</td>
      <td>Celda 8</td>
      <td>Celda 9</td>
    </tr>
  </tbody>
</table>

Las tablas en Bootstrap también pueden tener diferentes variantes de color utilizando las clases .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, y .table-dark. Estas clases se aplican al elemento <table> para cambiar el color de fondo de toda la tabla.

<table class="table table-primary">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Primera</th>
      <th scope="col">Segunda</th>
      <th scope="col">Tercera</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Celda 1</td>
      <td>Celda 2</td>
      <td>Celda 3</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Celda 4</td>
      <td>Celda 5</td>
      <td>Celda 6</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Celda 7</td>
      <td>Celda 8</td>
      <td>Celda 9</td>
    </tr>
  </tbody>
</table>

Bootstrap también ofrece opciones para alinear el contenido de las celdas utilizando clases de alineación como .text-start, .text-center, .text-end, .align-baseline, .align-top, .align-middle, .align-bottom, y .align-text-bottom.

<table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col" class="text-start">Izquierda</th>
        <th scope="col" class="text-center">Centro</th>
        <th scope="col" class="text-end">Derecha</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <th scope="row" style="height:100px">1</th>
        <td class="align-top border">Celda arriba</td>
        <td class="align-middle border">Celda en medio</td>
        <td class="align-bottom border">Celda abajo</td>
        </tr>
        <tr>
        <th scope="row" style="height:100px">2</th>
        <td class="align-baseline border">Texto baseline</td>
        <td class="align-text-top border">Texto top</td>
        <td class="align-text-bottom border">Texto bottom</td>
        </tr>
    </tbody>
</table>

Estas clases y utilidades de Bootstrap permiten crear tablas con un diseño atractivo y funcional, mejorando la presentación y la accesibilidad de los datos en las aplicaciones web.