Bootstrap 5 — Alerts

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add alerts with Bootstrap 5.

Alerts

Alerts give users contextual feedback messages for user actions.

It comes in various styles.

For example, we can write:

<div class="alert alert-primary">  
  primary alert  
</div>  
<div class="alert alert-secondary">  
  secondary alert  
</div>  
<div class="alert alert-success">  
  success alert  
</div>  
<div class="alert alert-danger">  
  danger alert  
</div>  
<div class="alert alert-warning">  
  warning alert  
</div>  
<div class="alert alert-info">  
  info alert  
</div>  
<div class="alert alert-light">  
  light alert  
</div>  
<div class="alert alert-dark">  
  dark alert  
</div>

We add the classes for the alerts with the given classes.

Link Color

The .alert-link class lets us match colored links with any alerts.

For example, we can write:

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

We have the .alert-link class to add links that match the style of the alerts.

Additional Content

We can add additional content into our alerts.

A heading can be added with the alert-heading class.

For example, we can write:

<div class="alert alert-success" role="alert">  
  <h4 class="alert-heading">Heading</h4>  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam hendrerit nisl. Nunc efficitur ex id orci lacinia, eget bibendum risus aliquam. Phasellus et ornare nisi, vel lacinia purus. Vivamus mollis cursus magna, quis consectetur justo bibendum vitae. Donec mattis sem non nisi elementum, non sollicitudin massa pretium. Donec ante enim, efficitur vitae pellentesque ac, varius eget purus. Aliquam ac ex sed dui tristique rutrum.</p>  
  <hr>  
  <p class="mb-0">In dictum elit vitae risus mattis sollicitudin non eu massa. Integer pretium pharetra nisi sed maximus. Sed sodales, sapien tristique posuere rhoncus, arcu quam cursus libero, in feugiat diam ante sed eros. Curabitur convallis auctor metus, eget lacinia tortor venenatis et. Praesent ligula metus, consequat sodales mauris fermentum, rhoncus placerat tortor. Cras nec laoreet purus, nec dictum erat. Quisque ac accumsan odio, non finibus urna.  </p>  
</div>

to add the alert-heading class to the heading.

And then the paragraphs below it have the main content.

Dismissing Alerts

We can add the .alert-dismissible class to add a close button to the alert.

On the close button, we’ve to add the data-dismiss="alert" attribute to let us close it.

The .fade and .show classes let us add transition effects when dismissing them.

For example, we can write:

<div class="alert alert-warning alert-dismissible fade show">  
  <strong>alert</strong>  
  <button type="button" class="close" data-dismiss="alert">  
    <span>&times;</span>  
  </button>  
</div>

We add the button with the close class to add a close button.

And we have the data-dismiss attribute to let us close the alert with it.

Also, we have the alert-dismissible class to make the alert dismissible.

fade showgives us a fade transition effect when the alert is shown.

The Bootstrap JavaScript files are required for this to work.

JavaScript Behavior

We can trigger the dismissal of an alert with JavaScript by writing:

const alertList = document.querySelectorAll('.alert')  
alertList.forEach((alert) => {  
  new bootstrap.Alert(alert)  
})

The alert HTML can then be written as:

<div class="alert alert-warning alert-dismissible fade show" >  
  <strong>alert</strong>  
  <button type="button" class="close" data-dismiss="alert" >  
    <span>&times;</span>  
  </button>  
</div>

We can then get an existing alert and close it programmatically:

setTimeout(() => {  
  const alertNode = document.querySelector('.alert');    
  const alert = new bootstrap.Alert(alertNode)  
  alert.close()  
}, 3000)

We created the alert object with the bootstrap.Alert constructor so that we can call close on it to close it.

Events

Alerts also emit events, we can listen to the close.bs.alert and closed.bs.alert events and do what we want.

Conclusion

We can add alerts and style them with Bootstrap 5.

They can be added programmatically and closed programmatically.