Alerts, badges and progress
Three small components tell the user about a state. An alert is a noticeable message about the result of an action ("Saved", "Payment failed"). A badge is a small label or counter next to text. A progress bar shows how much of the work is done.
An alert
alert together with an alert-{color} color and role="alert", so that a screen reader announces the message right away:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="alert alert-success" role="alert">The task "Prepare the report" was saved.</div>
<div class="alert alert-danger" role="alert">The payment failed. Please check your card.</div>Green and red full-width boxes with dark text in their own color.
A dismissible alert
The alert-dismissible fade show classes and a btn-close button with data-bs-dismiss="alert" add a close cross. Closing is done by Bootstrap's JavaScript:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Your trial</strong> ends in 3 days.
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>Click the cross and the box fades out and is removed from the page. The "Reset" button above the preview brings it back.
Badges
badge with text-bg-{color} is a small colored label. With rounded-pill it becomes oval:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<h5>Inbox <span class="badge text-bg-secondary">4</span></h5>
<p>
Status: <span class="badge text-bg-success">Paid</span>
<span class="badge rounded-pill text-bg-danger">Urgent</span>
</p>
<button type="button" class="btn btn-primary">
Notifications <span class="badge text-bg-light">7</span>
</button>A badge takes its parent's font size, so in a heading it is bigger than in a paragraph. In the admin dashboard badges show the order status in a table.
A progress bar
The outer progress element carries attributes for screen readers, the inner progress-bar has a width in percent:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<p class="mb-1">Project "Website": 65%</p>
<div class="progress" role="progressbar" aria-label="Project Website" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 65%"></div>
</div>
<div class="progress mt-3" role="progressbar" aria-label="Upload" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" style="width: 40%">40%</div>
</div>The blue bar is 65% full, the green one 40% with moving diagonal stripes. In a real project JavaScript changes the width, updating both style and aria-valuenow.
Common mistake
Expecting alert-dismissible to add the cross by itself. The class only frees space on the right for the button. You have to write the btn-close button with data-bs-dismiss="alert" yourself, and without the JavaScript loaded it will not work.