Using Bootstrap 4 Alerts


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

Bootstrap 4 Alerts

Bootstrap alerts are used to get sudden attention to the message. You can easily create alert messages using bootstrap. It also provides the functionality to create an alert message which is dismissible.

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

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


Create Bootstrap Alert Message

To create a bootstrap alert message, use the <div> element with the alert class in bootstrap.

A simple alert message is created by using the bootstrap alert class with the type of alert messages you want like alert-primary, alert-secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, and alert-dark.

Bootstrap alert example:

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 an info alert.
Light: This is a light alert.
Dark: This is a dark alert.

Code:

Example

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

Dismissible Bootstrap Alert Message

Using bootstrap you can create a close button at the end of the alert message, which when clicked closes the alert message. You can call is dismissible alerts.

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

Here are the steps to create a dismissible alert message:

Bootstrap dismissible alert example:

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.

Code:

Example

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

Bootstrap Alert Link

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

If there is any link within any alert message just add .alert-link class to the link and it will be relevant color.

Bootstrap alert link example:

This is a primary alert with link.
This is a primary alert with a link.
This is a danger alert with a link.
This is a danger alert with a link.
This is a warning alert with a link.
This is an info alert with a link.
This is a light alert with a link.
This is a dark alert with a link.

Code:

Example

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

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:

Example

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

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.

Points to remember:

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