Alerts & Badges

Alerts are boxed messages for feedback the user needs to notice — a success confirmation, a validation error. Badges are small, inline labels for a count or a status, sitting right next to the text they describe.

Alert variants

HTML index.html

<div class="alert alert-success">Your changes were saved.</div>
<div class="alert alert-danger">Something went wrong.</div>
<div class="alert alert-warning">Your session is about to expire.</div>

Rendered result

Three full-width boxes stacked vertically, each with a soft-tinted background and matching border and text color: a pale green box for the success message, a pale red box for the error, and a pale yellow box for the warning — each clearly distinguishable at a glance, before you even read the text.

Dismissible alerts

Add alert-dismissible plus a close button and Bootstrap's JavaScript handles fading it out on click:

HTML index.html

<div class="alert alert-success alert-dismissible fade show">
  Your changes were saved.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

Rendered result

The same green success alert as before, but now with a small "x" close icon in its top-right corner. Clicking it fades the alert out and removes it from the page — no page reload, no custom JavaScript needed beyond loading Bootstrap's JS bundle.

The fade and show classes together are what make the alert visible with a transition ready to go — remove show and the alert starts invisible, which is how you'd trigger one to fade in dynamically from your own code.

Badges

HTML index.html

<h5>Inbox <span class="badge bg-primary">12</span></h5>
<button class="btn btn-secondary">
  Notifications <span class="badge bg-danger">3</span>
</button>

Rendered result

The word "Inbox" followed by a small, rounded blue pill containing "12" in white text, sitting slightly raised next to the heading. Below it, a gray button reading "Notifications" with a small red "3" badge tucked at its end — the classic unread-count look.

Note: a dismissible alert's close button needs data-bs-dismiss="alert" to actually do anything — and like the navbar toggle in the previous lesson, that only works if Bootstrap's JavaScript bundle is loaded on the page, not just the CSS. Without it, the button renders in the right place but clicking it is a no-op.

PreviousCards NextModals