BOOTSTRAP 4 ALERTS

❮ Prev Next ❯

Bootstrap provides us easy way create predefined flexible alert messages.

Alert messages are used quite often for an information to have some special focus, or immidiate attention, like warning message or alert message.

The alert snippets are available for any length of text as well as it has an optional button to dismiss the message.

Bootstrap Create Alert Message

To create simple alert message use bootstrap class alert with the type of alert message you want like : alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light and alert-dark.

Primary: This is a primary alert.

Secondary: This is a primary alert.

Success: This is a danger alert.

Danger: This is a danger alert.

Warning: This is a warning alert.

Info: This is a info alert.

Light: This is a light alert.

Dark: This is a dark alert.

<div class="alert alert-primary"><b>Primary:</b> This is a primary alert.</div>
<div class="alert alert-secondary"><b>Secondary:</b> This is a primary alert.</div>
<div class="alert alert-success"><b>Success:</b> This is a danger alert.</div>
<div class="alert alert-danger"><b>Danger:</b> This is a danger alert.</div>
<div class="alert alert-warning"><b>Warning:</b> This is a warning alert.</div>
<div class="alert alert-info"><b>Info:</b> This is a info alert.</div>
<div class="alert alert-light"><b>Light:</b> This is a light alert.</div>
<div class="alert alert-dark"><b>Dark:</b> This is a dark alert.</div>

▶ Run the code

Bootstrap Dismissing Alert Message

Bootstrap allow us to create a close button to the alert message, which when clicked closes the alert message.

To create a dismissible alert message we need following things:

Include bootstrap.js file which contain code to close the alert message, and since bootstrap use jquery as dependency so you also need to includes jquery also.
Add .alert-dismissible class to alert message, which creates extra padding to the right of alert and positions the close button.
Create a button with attribute data-dismiss="alert", it triggers the javascript functionality to close the alert message.
(Optional): You can add .fade and .show to create animation while dismissing the message.

Primary: This is a primary alert.

Secondary: This is a secondary alert.

Success: This is a success alert.

Danger: This is a danger alert.

Warning: This is a warning alert.

<div class="alert alert-primary alert-dismissible">
  <b>Primary:</b> This is a primary alert.
  <button class="close" data-dismiss="alert">&times;</button>
</div>
<div class="alert alert-secondary alert-dismissible">
  <b>Secondary:</b> This is a secondary alert.
  <button class="close" data-dismiss="alert">&times;</button>
</div>
<div class="alert alert-success alert-dismissible">
  <b>Success:</b> This is a success alert.
  <button class="close" data-dismiss="alert">&times;</button>
</div>
<div class="alert alert-danger alert-dismissible">
  <b>Danger:</b> This is a danger alert.
  <button class="close" data-dismiss="alert">&times;</button>
</div>
<div class="alert alert-warning alert-dismissible">
  <b>Warning:</b> This is a warning alert.
  <button class="close" data-dismiss="alert">&times;</button>
</div>

▶ Run the code

Bootstrap Alert Link

The .alert-link class provide relavant color to links within any alert message.

Within any alert message just add .alert-link class to the link.

This is a primary alert with link.

This is a danger alert with link.

This is a warning alert with link.

This is a info alert with link.

This is a light alert with link.

This is a dark alert with link.

<div class="alert alert-primary">This is a primary alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-secondary">This is a primary alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-success">This is a danger alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-danger">This is a danger alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-warning">This is a warning alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-info">This is a info alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-light">This is a light alert with <a href="#" class="alert-link">link</a>.</div>
<div class="alert alert-dark">This is a dark alert with <a href="#" class="alert-link">link</a>.</div>

▶ Run the code

Additional Content In Alert Messages

Alert message can also contain additional HTML element inside alert message like heading, paragraph, horizontal bar, etc. Using more HTML elements inside alert message you can create a more informative alert message, which can also contain some action buttons.

System Overload!

Please check resources your system is overloading. Work on the issue!

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

<div class="alert alert-danger" role="alert">
  <h4 class="alert-heading">System Overload!</h4>
  <p>Please check resources your system is overloading. Work on the issue!</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

▶ Run the code

Points to remember:

To create alert message use .alert class with the type of alert message like .alert-primary, .alert-danger, .alert-success, etc.
To create dismissible alert message create a button with attribute data-dismiss="alert", and load bootstrap.js with jquery.
Alert can be made more informative by adding other HTML elements within alert message.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Bootstrap 4 Buttons

❮ Prev Next ❯