Bootstrap 5 Toasts SASS
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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > < link rel = "stylesheet" href = "./assets/css/style.css" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 > Bootstrap 5 Toasts SASS </ h2 > < br > < div class = "toast show" > < div class = "toast-header" > < strong class = "me-auto" > w3wiki </ strong > < button type = "button" class = "btn-close" data-bs-dismiss = "toast" > </ button > </ div > < div class = "toast-body" > < p > A computer science portal for Beginner </ 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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" > </ script > < link rel = "stylesheet" href = "./assets/css/style.css" > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ 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
Contact Us