Open In App

Bootstrap 5 Alerts SASS

Bootstrap 5 Alerts SASS can be used to change the default values provided for the alert by customizing the SCSS file.

SASS variables of Alerts:



SASS Variant Mixin of Alerts:

 



SASS Loop of Alerts:

Steps to override SCSS of BootStrap:

Step 1: Install bootstrap using the following command: 

npm i bootstrap

Step 2: Create your custom CSS file and write the variable you want to override. Then include the bootstrap SCSS file using import.

$class_to_override: values;
@import "node_modules/bootstrap/scss/bootstrap"

Step 3: Convert the file to CSS using a live server extension.

Step 4: Include the converted SCSS file to your HTML after the link tag of Bootstrap CSS  

Project Structure: The custom SCSS file name is “custom.scss” and “custom.css” is the converted file

 

Syntax:

$variable:value;

@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, making use of some of the above variables is shown.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Alerts SASS</title>
    <link href=
         rel="stylesheet">
     
   <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body class="text-center">
    <h1 class="text-success">GeeksforGeeks</h1>
    <div class="container" style="width: 500px;">
        <div class="alert alert-success">
            Welcome to GeeksforGeeks
        </div>
        <div class="alert alert-success">
            <h3>Welcome to GeeksforGeeks</h3>
        </div>
        <div class="alert alert-success">
            Welcome to <a href="#" class="alert-link">
                GeeksforGeeks</a>
        </div>
    </div>
</body>
</html>

custom.scss




$alert-padding-y:2rem;
$alert-link-font-weight:900;
$alert-color-scale:-70%;
@import "./node_modules/bootstrap/scss/bootstrap"

custom.css




.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 2rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 1px solid 
        var(--bs-alert-border-color);
    --bs-alert-border-radius: 0.375rem;
    position: relative;
    padding: var(--bs-alert-padding-y) 
        var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}
  
.alert-link {
    font-weight: 900;
}
  
.alert-success {
    --bs-alert-color: #0d442a;
    --bs-alert-bg: #d1e7dd;
    --bs-alert-border-color: #badbcc;
}

Output:

Output

Example 2: In this example, the following code demonstrates the use of some of the above variables




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Alerts SASS</title>
    <link href=
    rel="stylesheet">
    <link rel="stylesheet" href="./custom.css">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
<body class="text-center">
    <h1 class="text-success">GeeksforGeeks</h1>
    <div class="container" style="width: 500px;">
        <div class="alert alert-success">
            Welcome to GeeksforGeeks
        </div>
        <div class="alert alert-success">
            <h3>Welcome to GeeksforGeeks</h3>
        </div>
        <div class="alert alert-success">
            Welcome to <a href="#" class="alert-link">
            GeeksforGeeks</a>
        </div>
    </div>
</body>
</html>

custom.scss




$alert-bg-scale:30%;
$alert-border-radius:2rem;
@import "./node_modules/bootstrap/scss/bootstrap"

custom.css




.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 1px solid 
        var(--bs-alert-border-color);
    --bs-alert-border-radius: 2rem;
    position: relative;
    padding: var(--bs-alert-padding-y) 
        var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}
  
.alert-success {
    --bs-alert-color: #a3cfbb;
    --bs-alert-bg: #125f3b;
    --bs-alert-border-color: #badbcc;
}
  
.alert-success .alert-link {
    color: #82a696;
}

Output:

Output

Example 3: In this example, the following code demonstrates making use of some of the above variables.




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Alerts SASS</title>
    <link href=
    rel="stylesheet">
    <link rel="stylesheet" href="custom.css">
    <script src=
        integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
      
</head>
<body class="text-center">
    <h1 class="text-success">GeeksforGeeks</h1>
    <div class="container" style="width: 500px;">
        <div class="alert alert-success">
            Welcome to GeeksforGeeks
        </div>
        <div class="alert alert-success">
            <h3>Welcome to GeeksforGeeks</h3>
        </div>
        <div class="alert alert-success">
            Welcome to <a href="#" class="alert-link">
              GeeksforGeeks</a>
        </div>
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="btn-close" 
            data-bs-dismiss="alert"></button>
            Close this alert box
        </div>
    </div>
</body>
</html>

custom.scss




$alert-border-scale:80%;
$alert-border-radius:2rem;
$alert-border-width:5px;
$alert-dismissible-padding-r:8rem;
@import "./node_modules/bootstrap/scss/bootstrap"

custom.css




.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: 5px solid 
        var(--bs-alert-border-color);
    --bs-alert-border-radius: 2rem;
    position: relative;
    padding: var(--bs-alert-padding-y) 
        var(--bs-alert-padding-x);
    margin-bottom: var(--bs-alert-margin-bottom);
    color: var(--bs-alert-color);
    background-color: var(--bs-alert-bg);
    border: var(--bs-alert-border);
    border-radius: var(--bs-alert-border-radius);
}
  
.alert-dismissible {
    padding-right: 8rem;
}
  
.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}
  
.alert-success {
    --bs-alert-color: #0f5132;
    --bs-alert-bg: #d1e7dd;
    --bs-alert-border-color: #051b11;
}

Output:

Output

Reference: https://getbootstrap.com/docs/5.0/components/alerts/#sass


Article Tags :