Bootstrap 5 te permite crear layouts consistentes y responsive sin escribir todo el CSS desde cero. La clave está en entender containers, grid y breakpoints.

1) Incluir Bootstrap 5

La forma rápida es usar CDN:

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

2) Conceptos básicos del grid

• .container: ancho máximo y centrado.
• .row: fila.
• .col-*: columnas (12 por fila).

<div class="container">
  <div class="row">
    <div class="col-12 col-lg-8">Contenido</div>
    <div class="col-12 col-lg-4">Sidebar</div>
  </div>
</div>

3) Layout completo (header + nav + contenido + sidebar + footer)

<header class="bg-dark text-white p-3">
  <div class="container">
    <h1 class="h3 m-0">Mi web con Bootstrap</h1>
  </div>
</header>

<main class="py-4">
  <div class="container">
    <div class="row g-4">
      <section class="col-12 col-lg-8">
        <div class="p-3 border rounded">Contenido principal</div>
      </section>
      <aside class="col-12 col-lg-4">
        <div class="p-3 border rounded">Sidebar</div>
      </aside>
    </div>
  </div>
</main>

<footer class="bg-light py-3">
  <div class="container text-muted">Footer</div>
</footer>

4) Tips para hacerlo “bien”

• Usa spacing: p-*, m-*, g-* para separación y consistencia.
• Piensa mobile-first: primero col-12 y luego col-lg-*.
• No abuses: cuando necesites estilos propios, crea tu CSS y añade clases semánticas.