Bootstrap 4 Alert Box
Bootstrap 4 alert box message can be used for the purpose of creating immediate attention of the end-user with respect to success, warning, and error.
Process of creating Bootstrap 4 alert box component:
- To create a bootstrap alert box, add
.alertfollowed by one of the contextual classes to the parent container. -
These contextual classes are:
.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,.alert-lightor.alert-dark.
Example
Success! Indicates a successful or positive action.
Dark! This is a dark alert box.
Primary! This is a primary alert box.
Success! This is a success alert box.
Warning! This is warning alert box.
Danger! This is danger alert box.
Dark! This is dark alert box.
Light! This is light alert box.
Light! This is info alert box.
General Syntax
Try it nowSource Code
Source Code : Output
Boostrap Colored Alert Box
Success! This is a success alert box.
Info! This is a info alert box.
Note:Place .alert followed by one of the contextual classes to the parent container of the alert box. Basically, contextual classes are used to provide different background colors to the alert box.
Note: Please keep in mind that contextual classes are used to provide a colored alert box.
Bootstrap 4 Alert Link
Steps to create bootstrap 4 alert link:
-
To create a bootstrap alert link, you have to apply the
.alert-linkclass to any hyperlink base class. -
To create alert colored bootstrap alert link,you have to apply
alert-linkclass to any hyperlink base class and add one of the contextual classes like:.alert-success,.alert-info,.alert-warning,.alert-danger,.alert-primary,.alert-secondary,alert-lightor.alert-darkto parent(i.e div) class.
Alert Link Example
Success! This is a success alert link
Primary! This is a primary alert link
Danger! This is a danger alert link
General Syntax
Try it nowSource Code
Source Code : Output
Boostrap Alert link
Success! This is a success alert link
Primary! This is a primary alert link
Danger! This is a danger alert link
Note:You must have to provide a .alert-link to the hyperlink base class.
Close Alert Box
The Bootstrap closing alert system can be created very easily by adding the
.alert-dismissible class to the
alert container and then add .close and data-dismiss="alert" to a link or a button element.
Example
Success! A success alert box with close button.
Warning! A warning alert box with close button.
General Syntax
Try it nowSource Code
Source Code : Output
Boostrap Alert Box
Success! A success alert box with close button.
Warning! A warning alert box with close button.
Note: Bootstrap 4 close alert box has a close button. When a user clicks on the close button of the alert box the alert box will disappear from the web page.
×
![Modal Image]()