1.6 KiB
| layout | title |
|---|---|
| page | Media queries |
Since Bootstrap is designed to be mobile-first, we employ media queries in our CSS to create responsive pages and components. Media queries allow you to group rulesets by a handful of parameters, most notably viewport dimensions, to gracefully scale content across devices.
Common queries
Bootstrap uses the following media query ranges in our source Sass files for key breakpoints in our layout, grid system, and components.
{% highlight scss %} /* Extra small devices (phones, less than 768px) / / No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } {% endhighlight %}
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
{% highlight scss %} @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } {% endhighlight %}
Sass mixins
The above media queries are also available via Sass mixins:
{% highlight scss %} // List of mixins @include media-xs { ... } @include media-sm { ... } @include media-sm-max { ... } @include media-md { ... } @include media-md-max { ... } @include media-lg { ... }
// Usage @include media-xs { .element { display: block; } } {% endhighlight %}