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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
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
CSS
$alert-padding-y:2rem;
$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: 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
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="./custom.css">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
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
CSS
$alert-bg-scale:30%;
$alert-border-radius:2rem;
@import "./node_modules/bootstrap/scss/bootstrap"
custom.css
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.
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/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" href="custom.css">
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
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
CSS
$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
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
Similar Reads
Bootstrap 5 Alerts Link color Bootstrap 5 Alerts Link Color class is used to set the color of the alert element. There are different kind of alerts that indicates different things, if there is a success then the color of the alert will be green, if it's a failure then it should show a red color alert. Each color of the alert rep
3 min read
Bootstrap 5 Alerts Additional Content Bootstrap Alerts help inform users about particular events or give acknowledgment. But most of the time, only simple text alerts aren't enough to convey the message. There needs to be some additional content with a proper hierarchy. In such cases, Additional Content comes into the picture. It allows
2 min read
Bootstrap 5 Alerts Icons Bootstrap 5 Alerts Icons are used to add icons to the alert bar to format the bar and make it more informative. To include the icon using <svg> tag we have to define its path inside the <path> tag in svg tag. We also need to specify its height and width to adjust its size according to th
2 min read
Bootstrap 5 Alerts Dismissing Bootstrap 5 Alerts Dismissing provides a feature to dismiss the alerts inline and to enable alerts dismissing we need to add the .alert-dismissible class to the alert, and the data-bs-dismiss="alert" attribute to the close button.Syntax:<div class="alert alert-dismissible"> <button type="bu
2 min read
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 a
5 min read
Bootstrap 5 Alerts JavaScript behavior Bootstrap 5 Alerts JavaScript behavior provides to enable the dismissal of an alert when an action is triggered. In addition to this, alert instances can be created with the help of the alert constructor. Although, there are a few events that enable the alert functionality by implementing Bootstrap’
2 min read
Bootstrap 5 Alerts JavaScript behavior Triggers Bootstrap 5 Alert Triggers are used to close an alert. An alert can be closed using a close button inside the alert or by using a button outside the alert with a data-bs-target attribute. It should be noted that closing the alert also removes it from the DOM.Bootstrap 5 Alert Triggers used attribute
2 min read
Bootstrap 5 Alerts JavaScript Behavior Methods Bootstrap 5 Alerts methods that are used to control the visibility of the alert component. For example, these methods can be used to close or dispose of an alert component. It is useful for displaying popup messages or user action notifications on a webpage.Bootstrap 5 Alerts Methodsclose(): It is u
2 min read
Bootstrap 5 Alerts JavaScript behavior Events In this article, we will learn about the Alerts JavaScript behavior Events fired when interacting with Bootstrap 5 Alerts. Bootstrap 5 Alert component is useful for providing alerts or feedback messages arising from the user interacting with the functionalities of the application.Bootstrap 5 Alerts
2 min read