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

      <element class="alert alert-*"></element>

Try it now

Source Code

          <div class="container mt-4">
  <b>Bootstrap Colored Alert Box</b>
  <div class="alert alert-success">
    <strong>Success!</strong> This is a success alert box.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This is a info alert box.
  </div>
</div>

Try it now

Source Code: Output

Bootstrap 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.

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

      <element class="alert alert-*">
  <a href="#" class="alert-link">alert link</a>
</element>

Try it now

Source Code

          <div class="container mt-4">
  <b>Bootstrap Alert link</b>
  <div class="alert alert-success">
    <strong>Success!</strong> This is a 
    <a href="#" class="alert-link">success alert link</a>
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> This is a 
    <a href="#" class="alert-link">primary alert link</a>
  </div>
  <div class="alert alert-danger">
    <strong>Danger!</strong> This is a 
    <a href="#" class="alert-link">danger alert link</a>
  </div>
</div>

Try it now

Source Code: Output

Bootstrap 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

      <element class="alert alert-* alert-dismissible">
  <button type="button" class="close" data-dismiss="alert">�</button>
  <strong>Close!</strong> Alert Box
</element>

Try it now

Source Code

          <div class="container mt-4">
  <b>Boostrap Alert Box</b>
  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Success!</strong> A success alert box with close button.
  </div>
  <div class="alert alert-warning alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <strong>Warning!</strong> A warning alert box with close button.
  </div>
</div>

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

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4