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.5rem; 
$toast-color: green; 
$toast-max-width: 500px;

style.css

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

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"> 
          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: 2rem; 
$toast-background-color:green; 
$toast-border-radius: 2rem;

style.css

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

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"> 
          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>