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:
- $alert-padding-y: This variable provides the top and bottom padding of the alert. By default, it is 1rem.
- $alert-padding-x: This variable provides the left and right padding of the alert. By default, it is 1rem.
- $alert-margin-bottom: This variable provides the bottom margin of the alert. By default, it is 1rem.
- $alert-border-radius: This variable provides the border radius of the alert. By default, it is 0.375rem.
- $alert-link-font-weight: This variable provides the font weight of the alert link. By default, it is 700.
- $alert-border-width: This variable provides the border width of the alert. By default, it is 1px.
- $alert-bg-scale: This variable provides the contrast of the background color of the alert. By default, it is -80%
- $alert-border-scale: This variable provides the contrast of the border of the alert. By default, it is -70%
- $alert-color-scale: This variable provides the contrast of the text color in the alert. By default, it is 40%.
- $alert-dismissible-padding-r: This variable provides the right padding of the alert which can be dismissed. By default, it is 3rem
SASS Variant Mixin of Alerts:
- alert-variant: This mixin ‘alert-variant’ of alert is used in combination with the $theme-colors variable to create contextual modifier classes for alerts.
SASS Loop of Alerts:
- @each: @each loop of alerts is used along with the variant mixin ‘alert-variant’ to generate contextual modifier classes for modifying the alert background color, border color, and alert text color of the 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.
HTML
<!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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < div class = "container" style = "width: 500px;" > < div class = "alert alert-success" > Welcome to w3wiki </ div > < div class = "alert alert-success" > < h3 >Welcome to w3wiki</ h3 > </ div > < div class = "alert alert-success" > Welcome to < a href = "#" class = "alert-link" > w3wiki</ a > </ div > </ div > </ body > </ html > |
custom.scss
CSS
$alert-padding-y: 2 rem; $alert-link- font-weight : 900 ; $alert-color-scale: -70% ; @import "./node_modules/bootstrap/scss/bootstrap" |
custom.css
CSS
.alert { --bs-alert-bg: transparent ; --bs-alert-padding-x: 1 rem; --bs-alert-padding-y: 2 rem; --bs-alert- margin-bottom : 1 rem; --bs-alert- color : inherit; --bs-alert- border-color : transparent ; --bs-alert- border : 1px solid var(--bs-alert-border-color); --bs-alert-border-radius: 0.375 rem; 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:
Example 2: In this example, the following code demonstrates the use of some of the above variables
HTML
<!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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "./custom.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < div class = "container" style = "width: 500px;" > < div class = "alert alert-success" > Welcome to w3wiki </ div > < div class = "alert alert-success" > < h3 >Welcome to w3wiki</ h3 > </ div > < div class = "alert alert-success" > Welcome to < a href = "#" class = "alert-link" > w3wiki</ a > </ div > </ div > </ body > </ html > |
custom.scss
CSS
$alert-bg-scale: 30% ; $alert-border-radius: 2 rem; @import "./node_modules/bootstrap/scss/bootstrap" |
custom.css
CSS
.alert { --bs-alert-bg: transparent ; --bs-alert-padding-x: 1 rem; --bs-alert-padding-y: 1 rem; --bs-alert- margin-bottom : 1 rem; --bs-alert- color : inherit; --bs-alert- border-color : transparent ; --bs-alert- border : 1px solid var(--bs-alert-border-color); --bs-alert-border-radius: 2 rem; 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:
Example 3: In this example, the following code demonstrates making use of some of the above variables.
HTML
<!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 = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel = "stylesheet" > < link rel = "stylesheet" href = "custom.css" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "text-center" > < h1 class = "text-success" >w3wiki</ h1 > < div class = "container" style = "width: 500px;" > < div class = "alert alert-success" > Welcome to w3wiki </ div > < div class = "alert alert-success" > < h3 >Welcome to w3wiki</ h3 > </ div > < div class = "alert alert-success" > Welcome to < a href = "#" class = "alert-link" > w3wiki</ 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
CSS
$alert-border-scale: 80% ; $alert-border-radius: 2 rem; $alert- border-width : 5px ; $alert-dismissible-padding-r: 8 rem; @import "./node_modules/bootstrap/scss/bootstrap" |
custom.css
CSS
.alert { --bs-alert-bg: transparent ; --bs-alert-padding-x: 1 rem; --bs-alert-padding-y: 1 rem; --bs-alert- margin-bottom : 1 rem; --bs-alert- color : inherit; --bs-alert- border-color : transparent ; --bs-alert- border : 5px solid var(--bs-alert-border-color); --bs-alert-border-radius: 2 rem; 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 : 8 rem; } .alert-dismissible .btn-close { position : absolute ; top : 0 ; right : 0 ; z-index : 2 ; padding : 1.25 rem 1 rem; } .alert-success { --bs-alert- color : #0f5132 ; --bs-alert-bg: #d1e7dd ; --bs-alert- border-color : #051b11 ; } |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/alerts/#sass
Contact Us