Inform Your Users With a Pre-Defined Bootstrap Alert

If your website has a certain user-base, you should always make sure they are well informed. In our previous lesson, we discussed one of the tools used for providing information - a Bootstrap jumbotron. Now, we will get to know what Boostrap alerts are and how they're used.

Using Bootstrap alerts, you can make predefined messages to appear in some instances (for example, when a user click on a temporary unavailable item). With Bootstrap warning your users is made easy. In this tutorial, we'll cover making and styling alert boxes.

Bootstrap Alert: Main Tips

• Using Bootstrap 4, you can create alert messages.
• These pre-defined Bootstrap error messages are created by applying the .alert class with the contextual classes to provide the appearance of the container.

Creating A Bootstrap Alert

A basic Bootstrap alert message is created using this HTML:

<div class="alert alert-primary">
  Boo, I'm an alert!
 </div>

For reference, here's a list of the contextual classes that Bootstrap alert works with:

• .alert-success
• .alert-info
• .alert-warning
• .alert-danger
• .alert-primary
• .alert-secondary
• .alert-light
• .alert-dark

You can see all of them used in the code example below. View it in the code editor and see the differences each class brings:

<h2>Alerts</h2>
<p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
<div class="alert alert-success">
  Boo! I'm a success alert.
</div>
<div class="alert alert-info">
  Boo! I'm an info alert.
</div>
<div class="alert alert-warning">
  Boo! I'm a warning alert.
</div>
<div class="alert alert-danger">
  Boo! I'm a danger alert.
</div>
<div class="alert alert-primary">
    Boo! I'm a primary alert
</div>
<div class="alert alert-secondary">
    Boo! I'm a secondary alert.
</div>
<div class="alert alert-dark">
    Boo! I'm a dark grey alert.
</div>
<div class="alert alert-light">
    Boo! I'm a light grey alert.
</div>

Links in Alerts

When using alerts, you may also need to display links inside these Bootstrap warnings. For this, you have the .alert-link class, which matches the styling of the link to that of the alert message.

In the code example below, you can see clicking on click on me takes you to a particular link:

<div class="alert alert-success">
  Boo! You should <a href="#" class="alert-link">click on me</a>.
</div>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

EXCLUSIVE: 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

15% OFF

Pros

• Easy to navigate
• No technical issues
• Seems to care about its users

Main Features

• Huge variety of courses
• 30-day refund policy
• Free certificates of completion

AS LOW AS 14.99$

Closing Alerts

For when you'd like to create a Bootstrap alert that can be closed, you need to use the .alert-dismissable class. In addition to that, you need to add a button with the class called .close and the data-dismiss: alert attribute-value pair:

<div class="alert alert-primary alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  Hi! Please click on <a href="#" class="alert-link">me</a>
</div>

Alert Animation

If you'd like the Bootstrap error message to fade out when closed, you will need to add the .fade and .show classes to it like this:

<div class="alert alert-primary alert-dismissable fade show">
  <button type="button" class="close" data-dismiss="alert">&times;</button>
  Hi I'm <a href="#" class="alert-link">important</a>
</div>

Bootstrap Alert: Summary

• Bootstrap allows creating pre-defined warning and alert messages by applying .alert class.
• Contextual classes should be applied to determine the style of the container.