Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.
Core conceptsBreakpoints are the building blocks of responsive design. Use them to control when your layout can be adapted at a particular viewport or device size.
Use media queries to architect your CSS by breakpoint. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use min-width in our media queries.
Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.
Breakpoint Class infix Dimensions X-Small None 0–576px Smallsm ≥576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px Extra extra large xxl ≥1400px
Each breakpoint size was chosen to be a multiple of 12 and to be representative of a subset of common device sizes and viewport dimensions. They don’t specifically target every use case or device, but the provide ranges provide a strong and consistent foundation to build on for any nearly device.
These breakpoints are customizable via Sass—you’ll find them in a Sass map in our _variables.scss stylesheet.
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Min-widthBootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
These Sass mixins translate in our compiled CSS using the values declared in our Sass variables. For examp
Max-widthWe occasionally use media queries that go in the other direction (the given screen size or smaller):
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.
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
For example the @include media-breakpoint-only(md) { ... } will result in :
Similarly, media queries may span multiple breakpoint widths:
Which results in:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4