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
@import "../scss/bootstrap.scss";
$toast-font-size: 1.5rem;
$toast-color: green;
$toast-max-width: 500px;
|
style.css
.toast { --bs-toast-max-width: 500px;
--bs-toast-font-size: calc(1.275rem + 0.3vw);
--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.5rem;
}
} |
index.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
@import "../node_modules/bootstrap/scss/bootstrap.scss";
$toast-padding-x: 2rem;
$toast-background-color:green;
$toast-border-radius: 2rem;
|
style.css
.toast { --bs-toast-padding-x: 2rem;
--bs-toast-bg: green;
--bs-toast-border-radius: 2rem;
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
<!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