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.
