Breakpoints de Bootstrap 5 y grid responsive explicados

Bootstrap 5 tiene seis niveles responsive: extra small (menos de 576 px), sm (desde 576 px), md (768 px), lg (992 px), xl (1200 px) y xxl (1400 px). Todas las clases responsive usan esos nombres, así que col-md-6 significa “medio ancho desde 768 px” y d-lg-none significa “oculto desde 992 px”. Igual que Tailwind, Bootstrap es mobile first: las clases sin breakpoint se aplican a todos los tamaños y las clases con breakpoint se aplican desde ese ancho hacia arriba.

Breakpoints de Bootstrap 5 y ancho de los contenedores

Son los valores por defecto de la documentación de breakpoints de Bootstrap. .container-fluid siempre ocupa todo el ancho, y .container-md (y los demás infijos) ocupa todo el ancho hasta su breakpoint y a partir de ahí tiene un ancho fijo.

El grid responsive en la práctica

El grid de Bootstrap tiene 12 columnas. Para cada breakpoint indicas cuántas ocupa cada elemento:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

Así tienes una tarjeta por fila en el móvil, dos desde 768 px y tres desde 992 px. Puedes omitir col-12, porque una columna sin tamaño dentro de una row se estira de todos modos, pero escribirlo deja clara la intención.

Para grids de elementos iguales, las row columns son más cortas:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

Para reordenar contenido en un breakpoint se usan las clases order, como order-first order-md-0. Es útil cuando una imagen debe ir después de su título en el móvil pero al lado en escritorio.

Utilidades responsive que usarás todo el tiempo

• Visualización: d-none d-md-block oculta en móviles y muestra desde 768 px; d-lg-none oculta desde 992 px.
• Dirección flex: flex-column flex-md-row apila en móviles y alinea en fila desde md.
• Espaciado: p-3 p-lg-5 usa menos padding en pantallas pequeñas.
• Alineación de texto: text-center text-md-start.
• Navbar: navbar-expand-lg muestra el menú completo desde 992 px y el botón hamburguesa por debajo.
• Tablas: envuelve las tablas anchas en .table-responsive para que se desplacen dentro de su propio contenedor.
• Imágenes: .img-fluid aplica max-width: 100% y height: auto.

Mixins de media queries en Sass

Si compilas Bootstrap desde Sass, usa sus mixins en lugar de valores en píxeles escritos a mano:

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* menos de 768px */ }
@include media-breakpoint-between(md, xl) { /* de 768px a 1199.98px */ }
@include media-breakpoint-only(md) { /* de 768px a 991.98px */ }

Ojo con el significado de media-breakpoint-down(md) en Bootstrap 5: apunta a anchos menores que el breakpoint md y se compila como max-width: 767.98px. El .98 evita solapamientos con anchos fraccionarios en pantallas de alta densidad. Bootstrap 4 usaba el breakpoint siguiente para el mismo mixin, y eso sorprende a mucha gente al actualizar.

Personalizar los breakpoints de Bootstrap

Cambia los mapas de Sass antes de importar Bootstrap:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

Mantén las claves en orden ascendente y conserva xs: 0. ¿Conviene cambiarlos? Solo si tu diseño tiene un motivo real. La guía de breakpoints responsive explica cómo elegir anchos a partir del contenido y no de listas de dispositivos.

Errores responsive habituales con Bootstrap

• Usar col-6 en móviles. Dos columnas en una pantalla de 360 px dejan unos 160 px por columna después de los gutters; textos y botones rara vez caben.
• Olvidar el breakpoint de la navbar. Una navbar con muchos elementos y navbar-expand-md puede desbordarse entre 768 y 992 px.
• Ocultar contenido con d-none en móviles en lugar de reorganizarlo. Google indexa la versión móvil de la página.
• Mezclar media queries propias con valores distintos a los de Bootstrap, de modo que los componentes cambian a 768 px y tu CSS a 760 px.

Cómo probar un diseño con Bootstrap

Revisa cada nivel en su ancho exacto y 1 px por debajo: 575/576, 767/768, 991/992, 1199/1200 y 1399/1400. En Chrome DevTools, la opción Show media queries de la barra de dispositivos muestra los breakpoints como barras en las que puedes hacer clic.

Después revisa teléfonos concretos con su user agent y densidad de píxeles, algo que Mobile View Extension hace con un solo botón. El proceso completo está en cómo probar un diseño responsive.

Preguntas frecuentes

¿Cuáles son los breakpoints de Bootstrap 5?

576 px (sm), 768 px (md), 992 px (lg), 1200 px (xl) y 1400 px (xxl), con un nivel extra small sin nombre por debajo de 576 px.

¿Qué significa col-md-6 en Bootstrap?

Que el elemento ocupa 6 de 12 columnas, la mitad de la fila, desde el breakpoint md (768 px) hacia arriba. Por debajo de 768 px ocupa todo el ancho, salvo que otra clase indique lo contrario.

¿Bootstrap es mobile first?

Sí. Las clases sin breakpoint se aplican a todos los tamaños de pantalla y las clases con breakpoint las sobrescriben desde ese ancho hacia arriba.