Good websites keep users informed about what just happened, and Bootstrap provides two lightweight components for exactly this: alerts for messages and badges for small counts or labels.

Basic alerts

<div class="alert alert-success">Saved successfully</div>
<div class="alert alert-danger">Something went wrong</div>
<div class="alert alert-warning">Please check your input</div>

The colour of an alert should always match the seriousness of its message, so a user can judge the situation from colour alone before even reading the text.

A dismissible alert

<div class="alert alert-info alert-dismissible">
  A quick note
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

Adding alert-dismissible along with a btn-close button lets a user close the message manually. Bootstrap's JavaScript handles the fade-out animation and removal from the page automatically once clicked.

An alert with an icon

<div class="alert alert-danger d-flex align-items-center gap-2">
  <i class="bi bi-exclamation-triangle"></i>
  <span>Unable to save your changes.</span>
</div>

Badges

<button class="btn btn-primary">
  Inbox <span class="badge bg-light text-dark">4</span>
</button>

A badge is a small, rounded label typically used for a count, sitting neatly beside or inside other content without disrupting the surrounding layout.

Pill-shaped and positioned badges

<span class="badge rounded-pill bg-danger">New</span>

<button class="btn btn-primary position-relative">
  Messages
  <span class="badge rounded-pill bg-danger position-absolute top-0 start-100 translate-middle">3</span>
</button>

Combining position-absolute with top-0, start-100 and translate-middle pins a badge to the corner of whatever it sits inside, the familiar small notification dot pattern seen on many apps.

A related component: toasts

For a temporary message that appears briefly and disappears on its own, such as confirming an action succeeded without requiring the user to dismiss anything, Bootstrap's toast component fits better than a permanent alert, since it is designed specifically to show, wait, and then fade away automatically.

Keep messages clear

Regardless of which component is used, a message should be short, specific and written in plain language. Telling a user exactly what happened, and what to do next if something failed, is far more useful than a vague "an error occurred" that leaves them guessing about what comes next.