¿Qué es Bootstrap 5?

Bootstrap 5 es un framework CSS que facilita el diseño responsivo y componentes reutilizables.

Incluir Bootstrap 5 en tu proyecto

Usa el CDN para incluir Bootstrap rápidamente:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  

Ejemplo de Grid System

Bootstrap utiliza un sistema de 12 columnas:

<div class="container">
  <div class="row">
    <div class="col-6">Columna 1</div>
    <div class="col-6">Columna 2</div>
  </div>
</div>
  

Botones con Bootstrap

Usar clases para estilizar botones fácilmente:

<button class="btn btn-primary">Botón primario</button>
<button class="btn btn-success">Éxito</button>
  

Alertas

Bootstrap proporciona componentes listos como las alertas:

<div class="alert alert-warning" role="alert">
  Esta es una alerta de advertencia.
</div>
  

Formularios

Diseña formularios responsivos fácilmente:

<form>
  <div class="mb-3">
    <label class="form-label">Correo</label>
    <input type="email" class="form-control">
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>
  

Navbar básica

Una barra de navegación básica para sitios web:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MiSitio</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
    <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" href="#">Inicio</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Servicios</a></li>
    </ul>
  </div>
</nav>
  

Cards (Tarjetas)

Muy útiles para mostrar contenido agrupado visualmente:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Título de tarjeta</h5>
    <p class="card-text">Algo de texto dentro de esta tarjeta.</p>
    <a href="#" class="btn btn-primary">Ir a algún lugar</a>
  </div>
</div>
  

Modal (Ventana emergente)

Para mostrar contenido en un popup centrado:

<!-- Botón para abrir modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#miModal">
  Abrir modal
</button>

<!-- Modal -->
<div class="modal fade" id="miModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Título del modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Contenido del modal aquí.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>
  

Spinner (Cargando)

Indicador de carga simple:

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

Tablas con estilo

Tablas con diseño agradable por defecto:

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Nombre</th>
      <th>Correo</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>Juan</td><td>juan@example.com</td></tr>
    <tr><td>2</td><td>Ana</td><td>ana@example.com</td></tr>
  </tbody>
</table>