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
$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
Bootstrap 4 Code Examples
What's New in Bootstrap 4