Bootstrap 4 Alerts

Bootstrap 4 alerts system can be used for the purpose of creating immediate attention of the end-user with respect to success, warning, and error.

Steps To Create Bootstrap 4 alerts Box:

Step 1:To create a bootstrap alert box, add .alert followed by one of the contextual classes to the parent container.
Step 2: 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.

Danger! This is a success alert box.

Light! This is warning alert box.

Light! This is danger alert box.

Light! This is dark alert box.

Light! This is light alert box.

Light! This is 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.

General Syntax

		<div class="alert alert-success">
  <strong>Success!</strong> This is a success alert box.
</div>

Try It Now

Source Code

	
		<div class="container mt-5">
  <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 class="alert alert-warning"><strong>Warning!</strong> This is a warning alert box.</div>
  <div class="alert alert-danger"><strong>Danger!</strong> This is a danger alert box..</div>
  <div class="alert alert-primary"><strong>Primary!</strong> This is a primary alert box..</div>
  <div class="alert alert-secondary"><strong>Secondary!</strong> This is secondary alert box.</div>
  <div class="alert alert-dark"><strong>Dark!</strong> This is dark alert boix.</div>
  <div class="alert alert-light"><strong>Light!</strong> This is light alert box.</div>
</div>

Try it yourself

Source Code : Output

Success! This is a success alert box.

Info! This is a info alert box.

Warning! This is a warning alert box.

Danger! This is a danger alert box..

Primary! This is a primary alert box..

Secondary! This is secondary alert box.

Dark! This is dark alert boix.

Light! This is light alert box.

Note: Please keep in mind that contextual classes are used to provide a colored alert box.

Bootstrap 4 Alert Link

Creating bootstrap alert link:

Step1: To create a bootstrap alert link, you have to apply the .alert-link class to any hyperlink base class.
Step2: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

		<div class="alert alert-success">
   <strong>Success!</strong> This is a <a href="#" class="alert-link">success alert link</a>
</div>

Try It Now

Source Code

	
		<div class="container">
  <h2>Boostrap Alert link</h2>
  <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 yourself

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.

Closing 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

		<div class="alert alert-success alert-dismissible">
  <button type="button" class="close" data-dismiss="alert"></button>
  <strong>Success!</strong> A success alert box with close button.
</div>

Try It Now

Source Code

	
		<div class="container">
  <div class="alert alert-success alert-dismissible">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"></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"></button>
    <strong>Warning!</strong> A warning alert box with close button.
  </div>
</div>
<!--/container-->

Try it yourself

Source Code : Output

Success! A success alert box with close button.

Warning! A warning alert box with close button.

Note:This alert box has a close button therefore after performing a click operation on the button, then it disappears from the web page.

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS