Bootstrap — Teoría, Código, Videos y Cuestionario

CDN (rápido)

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

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

• CSS + bundle (incluye Popper para tooltips, dropdowns, etc.).
• No requiere jQuery en v5.

Utilidades clave

• Espaciado: .p-3, .m-2, .gap-2
• Tipografía: .fw-bold, .text-muted
• Layout: .container, .row, .col-*
• Display: .d-flex, .justify-content-between, .align-items-center

Breakpoints

• sm ≥576px, md ≥768px, lg ≥992px, xl ≥1200px, xxl ≥1400px
• Ej: .col-12 .col-md-6 cambia de 1 a 2 columnas en MD.

Patrones comunes

• Tarjetas en rejilla, cabeceras responsivas, footers pegajosos.
• Combina utilidades en vez de CSS personalizado cuando se pueda.

Componentes

• Botones, tarjetas, formularios, alertas, navbars, modales, offcanvas.
• Se personalizan con clases (ej: btn btn-primary).

JS de Bootstrap

• Activa comportamientos (modal, collapse, tooltip).
• Usa atributos data-bs-* o API JS.

Código

<div class="container">

  <div class="row g-3">

    <div class="col-12 col-md-6">Columna A</div>

    <div class="col-12 col-md-6">Columna B</div>

  </div>

</div>

Demo

Código

<nav class="navbar navbar-expand-lg bg-body-tertiary">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">MiSitio</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navDemo">

      <span class="navbar-toggler-icon"></span>

    </button>

    <div class="collapse navbar-collapse" id="navDemo">

      <ul class="navbar-nav ms-auto">

        <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>

        <li class="nav-item"><a class="nav-link" href="#">Cursos</a></li>

      </ul>

    </div>

  </div>

</nav>

Demo

Código

<button class="btn btn-primary">Primario</button>

<div class="alert alert-success">Hecho.</div>



<button class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#demoModal">Abrir Modal</button>

<div class="modal fade" id="demoModal" tabindex="-1">

  <div class="modal-dialog">

    <div class="modal-content">

      <div class="modal-header"><h5 class="modal-title">Hola</h5>

        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

      </div>

      <div class="modal-body">Contenido de ejemplo</div>

      <div class="modal-footer">

        <button class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>

      </div>

    </div>

  </div>

</div>

Demo