Media queries
min-widthmax-widthsingle breakpointbetween breakpointEjemplo de uso

<< Cambios en la rejilla Componentes responsive >>

En la mayoría de los casos con las clases que vienen en Bootstrap nos es suficiente para diseñar nuestra web, sin embargo, en algunas situaciones a veces queremos modificar cierto comportamiento como puede ser para aplicar colores, alineación, etc. que cambie dependiendo del tamaño de la pantalla. Será en estos casos cuando utilicemos los media queries. 

Bootstrap usa los siguientes rangos de media query (o breakpoints) en sus archivos de Sass para el layout, grid y componentes.

min-width

Bootstrap usa las siguientes media queries en sus archivos de sass:

// 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 mixin se traducen en CSS:

// 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

Si usamos los media queries en la otra dirección (tamaño máximo):

// 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 mixin se traducen en CSS:

// `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) { ... }

single breakpoint

Cuando queremos un media querie para un cierto tamaño de pantalla (min y max) tenemos:

@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) { ... }

Se traduce a

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

between breakpoint

De formal similar, si queremos abarcar a múltiples anchos:

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

Se traduce a

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

Ejemplo de uso

Por ejemplo, si queremos que en pantallas extrapequeñas el fondo sea rojo (myBackground) y que para el resto de los tamaños el fondo sea verde haremos:

.myBackground{
      background-color:green;
}
@media(max-width:768px){
      .myBackground {
            background-color: red;
      }
}

<< Cambios en la rejilla Componentes responsive >>