Bootstrap 5 Toasts SASS
Last Updated :
13 Jan, 2023
Bootstrap 5 Toasts SASS has a set of variables with default values that can be changed to customize the toasts.
Default values of SASS variables of Toasts:
$toast-max-width: 350px;
$toast-padding-x: 0.75rem;
$toast-padding-y: 0.5rem;
$toast-font-size: 0.875rem;
$toast-color: null;
$toast-background-color: rgba($white, .85);
$toast-border-width: 1px;
$toast-border-color: rgba(0, 0, 0, .1);
$toast-border-radius: $border-radius;
$toast-box-shadow: $box-shadow;
$toast-spacing: $container-padding-x;
$toast-header-color: $gray-600;
$toast-header-background-color: rgba($white, .85);
$toast-header-border-color: rgba(0, 0, 0, .05);
Description of Sass variables of Toasts:
- $toast-font-size: It is the font size used in the toasts
- $toast-color: It is the color of the toast
- $toast-max-width: It is the maximum width of the toast
- $toast-padding-x: It gives padding in the x-axis
- $toast-padding-y: It gives padding in the y-axis
- $toast-background-color: It is the background color of the toast
- $toast-border-width: It gives the border width of the toast
- $toast-border-color: It gives the border color of the toast
- $toast-border-radius: It gives the border radius of the toast
- $toast-box-shadow: It gives box shadow to the toast for customizing it
- $toast-spacing: It gives the spacing between toast.
- $toast-header-color: It is color the given to the toast header
- $toast-header-background-color: It is the background color given to the toast header
- $toast-header-border-color: It is the border color of the header of the toast
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 live server extension.
Step 4: Include CSS file in your HTML file.
<link rel="stylesheet" href="./assets/css/style.css">
Project Structure :
Syntax:
$toast-font-size: value;
$toast-color: value;
$toast-max-width: value;
...
‘. . .’ above means you can add other variables and their values.
Example 1: In this example, we have modified $toast-font-size , $toast-color, $toast-max-width variables.
style.scss
SCSS
@import "../scss/bootstrap.scss" ;
$toast- font-size : 1.5 rem;
$toast- color : green ;
$toast- max-width : 500px ;
|
style.css
CSS
.toast {
--bs-toast- max-width : 500px ;
--bs-toast- font-size : calc( 1.275 rem + 0.3 vw);
--bs-toast- color : green ;
width : var(--bs-toast-max-width);
font-size : var(--bs-toast-font-size);
color : var(--bs-toast-color);
}
@media ( min-width : 1200px ) {
.toast {
--bs-toast- font-size : 1.5 rem;
}
}
|
index.html
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< 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 >Toasts 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 >
Bootstrap 5 Toasts SASS
</ h2 >
< br >
< div class = "toast show" >
< div class = "toast-header" >
< strong class = "me-auto" >
GeeksforGeeks
</ strong >
< button type = "button" class = "btn-close"
data-bs-dismiss = "toast" >
</ button >
</ div >
< div class = "toast-body" >
< p >
A computer science portal for geeks
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we have modified $toast-padding-x , $toast-border-radius, $toast-background-color variables to customize toasts.
style.scss
SCSS
@import "../node_modules/bootstrap/scss/bootstrap.scss" ;
$toast-padding-x: 2 rem;
$toast- background-color : green ;
$toast-border-radius: 2 rem;
|
style.css
CSS
.toast {
--bs-toast-padding-x: 2 rem;
--bs-toast-bg: green ;
--bs-toast-border-radius: 2 rem;
background-color : var(--bs-toast-bg);
border-radius: var(--bs-toast-border-radius);
}
.toast-body {
padding : var(--bs-toast-padding-x);
word-wrap: break-word;
}
|
index.html
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< 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 >Toasts 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 >
Bootstrap 5 Toasts SASS
</ h2 >
< br >
< div class="toast show align-items-center
text-white border-0">
< div class = "d-flex" >
< div class = "toast-body" >
DSA - Data Structures and Algorithms.
</ div >
< button type = "button" class="btn-close btn-close-white
me-2 m-auto"
data-bs-dismiss = "toast"
aria-label = "Close" ></ button >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
References: https://getbootstrap.com/docs/5.0/components/toasts/#sass
Share your thoughts in the comments
Please Login to comment...