Grid

Breakpoints

The Bootstrap grid system is based on a 12 column layout. The grid system is responsive and adapts to different screen sizes and devices. The grid system uses the following breakpoints:

• Extra small: < 576px
• Small: ≥ 576px
• Medium: ≥ 768px
• Large: ≥ 992px
• Extra large: ≥ 1200px

Variables

To facilitate this, in the Handoff SASS code, we declare two variables that define the breakpoints:

1$grid-breakpoints: (
2  xs: 0,
3  sm: 576px,
4  md: 768px,
5  lg: 992px,
6  xl: 1200px,
7  xxl: 1400px,
8);
9
10// Grid containers
11$container-max-widths: (
12  sm: 540px,
13  md: 720px,
14  lg: 960px,
15  xl: 1200px,
16);
17

These breakpoints can be used in sass to define how a element should appear at a responsive size. For example:

1@include media-breakpoint-up(xl) {
2  .h2 {
3    color: green;
4  }
5}
6

Grid Classes

Bootstrap uses the following classes to define the grid layout:

• .container: The container class is used to create a fixed-width container.
• .container-fluid: The container-fluid class is used to create a full-width container.
• .row: The row class is used to create a row of columns.
• .col-*: The col-_ class is used to define the width of a column. The _ is a number between 1 and 12 that defines the width of the column.

For more information, see the Bootstrap documentation.