How to Create a New Breakpoint in Bootstrap 4


In Bootstrap 3, adding a new grid tier (breakpoint) was not a simple process. It required various LESS or CSS customizations. Thanks to Bootstrap 4 SASS, and the new $grid-breakpoints variable it's very easy to add a new grid tier. Consider for example you want to add a new "extra extra small" breakpoint named xxs to support device widths less that 375 pixels. You can accomplish this with SASS...

First, add the new breakpoint by starting it at zero (0) pixels, and change the existing xs breakpoint to 375.

$grid-breakpoints: (
  xxs: 0,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Then adjust the max container width accordingly. This is optional. In this case I'll make the max container the same as the xs breakpoint...

$container-max-widths: (
  xxs: 375px,
  xs: 375px,
  sm: 544px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

Voila! Now you can use any of the col-xxs-* classes in your HTML markup to create layouts for tiny screen sizes.

<div class="container">  
    <div class="row">
        <div class="col-xxs-2 col-xs-5 col-sm-6 col-lg-4">
         ...

Demo & Code

Additional resources...
Bootstrap 4 Code Examples

What's New in Bootstrap 4