Customizing the layout

Here, we will learn how to customize the breakpoints, containers, and grid system to create exactly the responsiveness and general layout that you want for all your content.

Breakpoints

The breakpoints define the minimum widths for when the layout will change and adapt to different screen sizes. These minimum widths are used in media queries.

The line numbers, variable name, and default values for the breakpoints are as follows:

bootstrap/scss/_variables.scss

431 $grid-breakpoints: (
432   xs: 0,
433   sm: 576px,
434   md: 768px,
435   lg: 992px,
436   xl: 1200px,
437   xxl: 1400px
438 ) !default;

We will now change the minimum widths for all screen sizes using the following Sass code:

part-1/chapter-5/layout/breakpoints/scss/style.scss

// Specify the breakpoint sizes
$grid-breakpoints: (
  xs: 0,
  sm: 300px,
  md: 600px...