Breakpoints
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| X-Small | None | <576px |
| Small | sm |
≥576px |
| Medium | md |
≥768px |
| Large | lg |
≥992px |
| Extra large | xl |
≥1260px |
| Extra extra large | xxl |
≥1400px |
Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12.
These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.
More on modifying Sass maps and variables.
Media queries
Min-width
Max-width
These mixins take those declared breakpoints, subtract .02px from them, and use them as our max-width values. For example:
Why subtract .02px? Browsers don’t currently support range context queries, so we work around the limitations of
min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.Single breakpoint
For example the @include media-breakpoint-only(md) { ... } will result in :
Between breakpoints
Which results in: