Puntos de interrupción (Breakpoints)

Conceptos clave

• Los puntos de interrupción son los componentes básicos del diseño responsivo. Úsalos para controlar cuándo se puede adaptar tu diseño a un tamaño de dispositivo o ventana gráfica en particular.

• Usa media queries para estructurar tu CSS por punto de interrupción. Las media queries son una característica de CSS que te permite aplicar estilos de forma condicional basándote en un conjunto de parámetros del navegador y del sistema operativo. En nuestras media queries, lo más habitual es usar min-width.

• El diseño responsivo enfocado primero en dispositivos móviles (Mobile first) es el objetivo. El CSS de Bootstrap tiene como objetivo aplicar el mínimo de estilos para que un diseño funcione en el punto de interrupción más pequeño, y luego va añadiendo 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.

Puntos de interrupción disponibles

Bootstrap incluye seis puntos de interrupción predeterminados, a veces denominados niveles de cuadrícula (grid tiers), para construir de forma responsiva. Estos puntos de interrupción se pueden personalizar si estás utilizando nuestros archivos Sass de origen.

Cada punto de interrupción fue elegido para albergar cómodamente contenedores cuyos anchos son múltiplos de 12. Los puntos de interrupción también representan un subconjunto de tamaños de dispositivos comunes y dimensiones de ventanas gráficas; no se dirigen específicamente a cada caso de uso o dispositivo. En cambio, los rangos brindan una base sólida y consistente para construir en casi cualquier dispositivo.

Estos puntos de interrupción se pueden personalizar a través de Sass; los encontrarás en un mapa Sass en nuestra hoja de estilos _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 de Sass, consulta la sección CSS de la documentación de Grid.

Media queries

Dado que Bootstrap está desarrollado para enfocarse primero en dispositivos móviles (mobile first), utilizamos un puñado de media queries para crear puntos de interrupción lógicos para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en los anchos mínimos de la ventana gráfica y nos permiten escalar los elementos a medida que cambia la ventana gráfica.

Ancho mínimo (Min-width)

Bootstrap utiliza principalmente los siguientes rangos de media queries (o puntos de interrupción) en nuestros archivos Sass de origen para nuestro diseño, sistema de cuadrícula y componentes.

// Mixins de origen

// No es necesaria ninguna media query para el punto de interrupción 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 a partir de `min-width: 0`, y luego mostrar en el punto de interrupción `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 extra pequeños (teléfonos en posición vertical, menos de 576px)
// No hay media query para `xs`, ya que este es el predeterminado en Bootstrap

// Dispositivos pequeños (teléfonos en posición horizontal, 576px o más)
@media (min-width: 576px) { ... }

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

// Dispositivos grandes (computadoras de escritorio, 992px o más)
@media (min-width: 992px) { ... }

// Dispositivos extra grandes (computadoras de escritorio grandes, 1200px o más)
@media (min-width: 1200px) { ... }

// Dispositivos extra extra grandes (computadoras de escritorio más grandes, 1400px o más)
@media (min-width: 1400px) { ... }

Ancho máximo (Max-width)

Ocasionalmente utilizamos media queries que van en la otra dirección (el tamaño de pantalla dado o más pequeño):

// No es necesaria ninguna media query para el punto de interrupción xs, ya que es efectivamente `@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) { ... }

// Ejemplo: Estilo desde el punto de interrupción mediano hacia abajo
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Estos mixins toman esos puntos de interrupción declarados, les restan .02px y los utilizan como nuestros valores de max-width. Por ejemplo:

// `xs` devuelve solo un conjunto de reglas y ninguna media query
// ... { ... }

// `sm` se aplica a dispositivos extra pequeños (teléfonos en posición vertical, menos de 576px)
@media (max-width: 575.98px) { ... }

// `md` se aplica a dispositivos pequeños (teléfonos en posición horizontal, menos de 768px)
@media (max-width: 767.98px) { ... }

// `lg` se aplica a dispositivos medianos (tablets, menos de 992px)
@media (max-width: 991.98px) { ... }

// `xl` se aplica a dispositivos grandes (computadoras de escritorio, menos de 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` se aplica a dispositivos extra grandes (computadoras de escritorio grandes, menos de 1400px)
@media (max-width: 1399.98px) { ... }

Punto de interrupción único

También hay media queries y mixins para apuntar a un único segmento de tamaños de pantalla utilizando los anchos de punto de interrupción mínimos y máximos.

@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) { ... } dará como resultado:

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

Entre puntos de interrupción

Del mismo modo, las media queries pueden abarcar múltiples anchos de puntos de interrupción:

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

Lo que da como resultado:

// Ejemplo
// Aplicar estilos a partir de dispositivos medianos y hasta dispositivos extra grandes
@media (min-width: 768px) and (max-width: 1199.98px) { ... }