Open In App

Bootstrap 5 Containers Sass

Improve
Improve
Like Article
Like
Save
Share
Report

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

SCSS




@import "../node_modules/bootstrap/scss/bootstrap.scss";
  
$container-max-widths: (
  sm: 500px,
  md: 700px,
  lg: 900px,
);
  
@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;
    }
  }
}


style.css

CSS




@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 500px;
  }
}
  
@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 700px;
  }
}
  
@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width: 900px;
  }
}


index.html

HTML




<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
      integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
      crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap5 Containers Sass</title>
  <script src=
  </script>
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
  
<body>
  <div class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>Bootstrap5 Containers Sass</h2><br>
    <div class="container-sm bg-primary">
        100% wide until small breakpoint
    </div>
    <div class="container-md bg-success">
        100% wide until medium breakpoint
    </div>
    <div class="container-lg bg-danger">
        100% wide until large breakpoint
    </div>
  </div>
</body>
</html>


Output:

 

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

style.scss

SCSS




@import "../node_modules/bootstrap/scss/bootstrap.scss";
  
@mixin make-container($padding-x: $container-padding-x) {
    width: 50%;
    padding-right: 2rem;
    padding-left: 10rem;
    margin-right: auto;
    margin-left: auto;
}
  
.container-fluid {
    @include make-container();
}


style.css

CSS




.container-fluid.container-sm,
.container-md.container-lg,
.container-xl,.container-xxl {
    width: 50%;
    padding-right: 2rem;
    padding-left: 10rem;
    margin-right: auto;
    margin-left: auto;
}


index.html

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href=
      integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
      crossorigin="anonymous">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap5 Containers Sass</title>
  <link rel="stylesheet" href="./assets/css/style.css">
</head>
  
<body>
  <div class="text-center">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h2>
        Bootstrap5 Containers Sass
    </h2>
    <br>
    <br>
    <div class="container-fluid bg-success">
      <h3>GeeksforGeeks</h3>
    </div>
  </div>
</body>
</html>


Output:

 

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



Last Updated : 13 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads