Breakpoints

Conceptos básicos

• Los breakpoints son los bloques de construcción del diseño responsive. Úsalos para controlar cuándo tu layout puede adaptarse a un tamaño particular de viewport o dispositivo.

• Usa media queries para estructurar tu CSS por breakpoint. Las media queries son una funcionalidad de CSS que te permite aplicar estilos condicionalmente basándose en un conjunto de parámetros del navegador y del sistema operativo. Usamos más comúnmente min-width en nuestras media queries.

• El objetivo es un diseño mobile first y responsive. El CSS de Bootstrap pretende aplicar el mínimo de estilos necesario para que un layout funcione en el breakpoint más pequeño, y luego añadir 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 a tus visitantes.

Breakpoints disponibles

Bootstrap incluye seis breakpoints por defecto, a veces denominados grid tiers, para construir de forma responsive. Estos breakpoints se pueden personalizar si estás usando 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 dispositivo y dimensiones de viewport comunes—no se dirigen específicamente a cada caso de uso o dispositivo. En su lugar, los rangos proporcionan una base sólida y consistente sobre la que construir para casi cualquier dispositivo.

Estos breakpoints son personalizables mediante Sass—los encontrarás en un map de Sass en nuestra hoja de estilos _variables.scss.

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

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

Media queries

Dado que Bootstrap está desarrollado para ser mobile first, usamos un puñado de media queries para crear breakpoints sensatos para nuestros layouts e interfaces. Estos breakpoints se basan principalmente en anchos mínimos de viewport y nos permiten escalar los elementos a medida que cambia el viewport.

Min-width

Bootstrap usa principalmente los siguientes rangos de media queries—o breakpoints—en nuestros archivos fuente Sass para nuestro layout, sistema de grid y componentes.

// Source mixins

// No media query necessary for xs breakpoint as it's effectively `@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) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

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

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Max-width

Ocasionalmente usamos media queries que van en la otra dirección (el tamaño de pantalla dado o menor):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Estos mixins toman esos breakpoints declarados, les restan .02px y los usan como nuestros valores de max-width. Por ejemplo:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Un solo breakpoint

También hay media queries y mixins para dirigirse a un único segmento de tamaños de pantalla usando los anchos mínimo y máximo de breakpoint.

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

Por ejemplo, @include media-breakpoint-only(md) { ... } resultará en:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Entre breakpoints

De forma similar, las media queries pueden abarcar múltiples anchos de breakpoint:

@include media-breakpoint-between(md, xl) { ... }

Lo cual resulta en:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }