css • Bootstrap Grid

Default compiled Bootstrap Grid (v.5.1.1) available from CDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap-grid.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

Breakpoints (default values)

Description	sass maps	xs	sm	md	lg	xl	xxl
Default variables values	-	0	576px	768px	992px	1200px	1400px
Viewport pixels size	$grid-breakpoints	0 ≥ 575.9	576 ≥ 767.9	768 ≥ 991.9	992 ≥ 1199.9	1200 ≥ 1399.9	1400 ≥ ∞
Container’s row inner width	$container-max-widths	Elastic	540px	720px	960px	1140px	1320px

xxl breakpoints is available by default only since v.5

 

Sass

It does create a bigger file to load but extending Bootstrap variables and mixins within our own Sass gives us a lot more tools to work faster while making sure that all the same colors and fonts are used throughout the app.

Imported from npm bootstrap

• @import '../../node_modules/bootstrap/scss/_bootstrap-grid.scss'

Variables

• Columns and gutters
  • $grid-columns: 12 !default;
  • $grid-gutter-width: 1.5rem !default;
• Maps
  • $grid-breakpoints: (…);
  • $container-max-widths: (…);

Mixins

Bootstrap's Grid with Sass documentation is more complete. The following Sass mixins are just a quick reminder of common options.

Sass mixin	Compiled CSS (default values)
@include make-container();	padding-right: var(--bs-gutter-x, 0.75rem); padding-left: var(--bs-gutter-x, 0.75rem); margin-right: auto; margin-left: auto;
@include make-col();
@include media-breakpoint-up(sm) { … }	@media (min-width: 576px) { … }
@include media-breakpoint-down(sm) { … }	@media (max-width: 575.9px) { … }
@include media-breakpoint-only(sm) { … }	@media (min-width: 576px) and (max-width: 767.9px) { … }

Extending class

• .example { @extend .row !optional; }
• .example { @extend .col !optional; }