bootstrap 5 : Breakpoints - Tamaño de la pantalla

Los breakpoints son anchos personalizables que determinan cómo se comporta tu diseño responsive en los tamaños de dispositivo o viewport en Bootstrap.

→ Ir a la Página oficial de bootstrap 5 Breakpoints 

Conceptos básicos

• Los breakpoints son los componentes básicos del diseño responsive. Úsalos para controlar cuándo se puede adaptar tu diseño a un viewport particular o tamaño de dispositivo.

• Utiliza media queries para diseñar tu CSS por breakpoint. Las media queries son una función de CSS que te permite aplicar estilos de forma condicional en función de un conjunto de parámetros del navegador y del sistema operativo. Comúnmente usamos min-width en nuestras media queries.

• Mobile first, el diseño responsive es el objetivo. El CSS de Bootstrap tiene como objetivo aplicar el mínimo de estilos para hacer que un diseño funcione en el breakpoint más pequeño, y luego capas de estilos para ajustar ese diseño para dispositivos más grandes. Esto optimiza tu CSS, mejora el tiempo de renderizado y proporciona una gran experiencia para tus visitantes.

Breakpoints disponibles

Bootstrap incluye seis breakpoints predeterminados, a veces denominados niveles de cuadrícula, para compilar de forma responsive. Estos breakpoints se pueden personalizar si estás utilizando nuestros archivos fuente Sass.

Cada breakpoint se eligió para contener cómodamente contenedores cuyos anchos son múltiplos de 12. Los breakpoints también son representativos de un subconjunto de tamaños de dispositivos comunes y dimensiones de viewports; no se dirigen específicamente a cada caso de uso o dispositivo. En cambio, los rangos brindan una base sólida y consistente para desarrollar casi cualquier dispositivo.

Estos breakpoints se pueden personalizar a través de Sass; los encontrarás en un mapa de Sass en nuestra hoja de estilo _variables.scss.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Para obtener más información y ejemplos sobre cómo modificar nuestros mapas y variables Sass, consulta la sección Sass de la documentación de Grid.

Media queries

Dado que Bootstrap está desarrollado para ser Mobile first, usamos un puñado de media queries para crear breakpoints sensibles para nuestros diseños e interfaces. Estos breakpoints se basan principalmente en anchos mínimos de viewports y nos permiten aumentar la escala de los elementos a medida que cambia la ventana gráfica.

Min-width

Bootstrap utiliza principalmente los siguientes rangos de media queries, o breakpoints, en nuestros archivos fuente Sass para nuestro diseño, sistema de cuadrícula y componentes.

// Source mixins

// No es necesaria una media query para el breakpoint xs, ya que es efectivamente `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Uso

// Ejemplo: Ocultar comenzando en `min-width: 0`, y luego mostrar en el breakpoint `sm`
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Estos mixins de Sass se traducen en nuestro CSS compilado utilizando los valores declarados en nuestras variables de Sass. Por ejemplo:

// Dispositivos X-Small (teléfonos verticales, menos de 576px)
// No hay media queries para `xs` ya que este es el valor predeterminado en Bootstrap

// Dispositivos pequeños (teléfonos horizontales, 576px y más)
@media (min-width: 576px) { ... }

// Dispositivos medianos (tabletas, 768px y más)
@media (min-width: 768px) { ... }

// Dispositivos grandes (escritorios, 992px y más)
@media (min-width: 992px) { ... }

// Dispositivos X-Large (escritorios grandes, 1200px y más)
@media (min-width: 1200px) { ... }

// Dispositivos XX-Large (escritorios más grandes, 1400px y más)
@media (min-width: 1400px) { ... }