BOOTSTRAP 4 ALERTS

In this tutorial, you will learn about Bootstrap alerts and how to use them in your Bootstrap project.

Bootstrap 4 Alerts

Alerts are used to get sudden attention to the message. Bootstrap provides the functionality to create an alert message which is also dismissible.

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

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

The alert message is dismissible by clicking on the close button.

Bootstrap Create Alert Message

To create an alert message, we use the <div> tag with the class alert.

To create a simple alert messages 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.

Example:

Code:

<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 an 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>

Bootstrap Dismissing Alert Message

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

To create a dismissible alert message, we use the <button> tag with the class close.

To create a dismissible alert message we need the following things:

• Include bootstrap.js file which contains code to close the alert message, and since bootstrap use jquery as a dependency so you also need to include 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.

Example:

Code:

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

Bootstrap Alert Link

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

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

Example:

Code:

<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 an 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>

Additional Content In Alert Messages

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

Example:

Code:

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

Conclusion

Bootstrap provides a set of predefined classes for alert messages, which can be used to quickly create alert messages with different styles. You can also use additional HTML elements inside alert messages to create more informative alert messages.

You can also use the <button> element inside the alert message to create action buttons.