Boostrap 4 Alerts and Badges

What is Alerts and Badges in Boostrap 4?

Alerts are available for any length of text, as well as an optional dismiss button.(e.g., success, warning, danger)

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Alert Messages:

Let's see examples of how to make alert message in Boostrap success, warning, danger

                                      
<div class="alert alert-success" role="alert">
  This is a success alert message.
</div>
<div class="alert alert-info" role="alert">
  This is an info alert message.
</div>
<div class="alert alert-warning" role="alert">
  This is a warning alert message.
</div>
<div class="alert alert-danger" role="alert">
  This is an error alert message.
</div>

Badge Component:

Badges are mini icons that are utilized to show more information about an archetype, for example, count, status, or label.

It can be taken to various aspect, be it buttons, links, or even navigation objects.

                                      
<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>
<a href="#" class="btn btn-secondary">
  Inbox <span class="badge badge-danger">10+</span>
</a>
<span class="badge badge-success">Online</span>