Bootstrap 4 Alert Box

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 .alert followed 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-light or .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 now

Source Code

Try it now

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-link class to any hyperlink base class.
  • To create alert colored bootstrap alert link,you have to applyalert-link class 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-light or .alert-dark to 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 now

Source Code

Try it now

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 now

Source Code

Try it now

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.

Online Test / Quiz