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
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:
.gif)
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
Please Login to comment...