Bootstrap 5 Containers Sass

Bootstrap5 Containers Sass has a set of predefined container classes which makes building layouts easier. We can customize it by changing the Sass map. We can also make our own containers with Bootstrap 5 SASS mixins.

Steps to override SCSS of Bootstrap:

Step 1: Install bootstrap using the following command

npm i bootstrap

Step 2: Create your custom scss file and write the variable you want to override. Then include the bootstrap scss file using import.

@import "../node_modules/bootstrap/scss/bootstrap.scss";
$variable_to_override: value;

Step 3: Convert the SCSS file to CSS using a live server extension.

Step 4: Include CSS file in your HTML file.

<link rel="stylesheet" href="./assets/css/style.css">

Project Structure:

Syntax:

@each $breakpoint, $container-max-width in $container-max-widths {
 .container-#{$breakpoint} {
 @extend .container-fluid;
 }
 @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
 %responsive-container-#{$breakpoint} {
 max-width: $container-max-width;
 }
 }
}

Example 1: We can customize containers by modifying the SASS map

style.scss

style.css

index.html

Output:

Example 2: In this example, we have created our own container with SASS mixins

style.scss

style.css

index.html

Output:

References: https://getbootstrap.com/docs/5.0/layout/containers/#sass