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
@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
@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
<!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
@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
.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
<!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