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:
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 : 2 rem;
padding-left : 10 rem;
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 : 2 rem;
padding-left : 10 rem;
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
Share your thoughts in the comments
Please Login to comment...