CSS

Bootstrap 5: grid, utilidades y componentes sin fricción

Aprende a maquetar interfaces rápidas con Bootstrap 5: sistema de 12 columnas, utilidades responsive y componentes listos para producción.

¿Cuánto sabes de CSS?

📘 Teoría

Mentalidad Bootstrap

Construyes UI con piezas estandarizadas y decisiones de layout claras.

Bootstrap ofrece clases de layout y componentes listos para usar: botones, alertas, cards, navbars, formularios y más.

La ventaja principal es velocidad y coherencia visual, especialmente en paneles internos, backoffices y MVPs.

No sustituye entender CSS: te conviene dominar spacing, grid y responsive para usarlo con criterio.

Rápido para prototipos y productos internos.
Sistema de utilidades muy estable.
Ideal si el equipo necesita resultados consistentes en poco tiempo.

Grid de 12 columnas

Combina container, row y col-* para controlar estructura por breakpoint.

Cada fila se divide en 12 columnas. Puedes definir cuántas ocupa cada bloque según tamaño de pantalla: col-12 col-md-6 col-lg-4.

El enfoque es mobile-first: estilos base para móvil y mejoras progresivas con breakpoints sm, md, lg, xl.

Grid responsive básico

<div class="container">
  <div class="row g-3">
    <div class="col-12 col-md-6 col-lg-4">A</div>
    <div class="col-12 col-md-6 col-lg-4">B</div>
    <div class="col-12 col-md-6 col-lg-4">C</div>
  </div>
</div>

Utilidades y componentes

Combina spacing, tipografía y componentes sin escribir CSS para cada caso.

Con utilidades como p-3, mt-4, d-flex o text-secondary resuelves gran parte del estilo directamente en markup.

Para elementos complejos, apóyate en componentes Bootstrap y personaliza sobre una capa CSS propia cuando sea necesario.

1 Mentalidad Bootstrap 2 Grid de 12 columnas 3 Utilidades y componentes

🧭 Visuales clave

Bootstrap vs Tailwind en flujo de trabajo

Ayuda a decidir cuándo conviene cada framework según velocidad, control y mantenibilidad.

Comparativa visual entre enfoque de componentes de Bootstrap y utilidades de Tailwind.

🧪 Aprende probando

Ejemplo Demo: dashboard responsive con cards Rejilla de tarjetas con utilidades de espaciado y tipografía.

⌄

🏁 Retos

Reto Reto: 3 columnas en desktop, 1 en móvil Configura las columnas con clases responsive de Bootstrap.

⌄

🧰 Recursos

Enlaces útiles

Bootstrap Docs Bootstrap Grid Bootstrap Components

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 67

Tailwind CSS: utilidades, diseño responsive y componentes mantenibles

Lección 69

Componente Header: navegación, sticky y accesibilidad

›