Breakpoints

Breakpoints are based on common device viewport widths. Abbreviations are used for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the properties at each breakpoint. For example, when using column widths for grid layouts, you can specify that the width is 12 columns wide by default—8 columns wide from the medium breakpoint and 4 columns wide from the extra-large breakpoint: <div class="col-12 col-md-8 col-xl-4">...</div>.

In most cases, breakpoints are used with the min-width media query—meaning that when using a responsive utility class, the class becomes "enabled" from the breakpoint on upwards. Or from the browser's perspective, when the browser's width is the breakpoint or wider.

Breakpoint Variables

The above values are defined as variables and then put into a Sass map that generates the media query mixin

//breakpoints
$width-xs: 0;
$width-sm: 544px;
$width-md: 768px;
$width-lg: 1012px;
$width-xl: 1280px;
$width-xxl: 1366px;
$width-xxxl: 1640px;


$breakpoints: (
    sm: $width-sm,
    md: $width-md,
    lg: $width-lg,
    xl: $width-xl,
    xxl:$width-xxl,
    xxxl:$width-xxxl
) !default;

Media Query Mixins

These allow you to change CSS properties at a particular breakpoint and work by passing in a breakpoint value, such as breakpoint(md).

Media queries are scoped from each breakpoint and upwards. In the example below, the font size remains 28px until the viewport size meets the md breakpoint. From there upwards—including through the xl breakpoint—the font size changes to 32px.

.my-style {
   font-size: 28px;
   @include breakpoint(md) {
     font-size: 32px;
   }
}