Tables, Badges, Alerts and Progress Bars

Every dashboard, admin panel and data-driven page needs a way to present structured information and give users feedback. Bootstrap ships four components that handle this beautifully: tables for tabular data, badges for counts and labels, alerts for contextual messages, and progress bars for visualizing completion. In this lesson you will learn how to style each one, combine them, and make them responsive.

Styling Tables

A plain HTML table looks cramped and dated. Add the .table class to a <table> element and Bootstrap applies comfortable padding, horizontal dividers and inherited typography:

html

<table class="table">
  <thead>
    <tr><th>Name</th><th>Role</th><th>Status</th></tr>
  </thead>
  <tbody>
    <tr><td>Asha</td><td>Developer</td><td>Active</td></tr>
    <tr><td>Marco</td><td>Designer</td><td>On leave</td></tr>
  </tbody>
</table>

Modifier classes change the look instantly:

.table-striped adds zebra striping to rows.
.table-hover highlights a row when the mouse passes over it.
.table-bordered draws borders on all cells, while .table-borderless removes them.
.table-sm halves the cell padding for dense data.
.table-dark inverts the color scheme for dark layouts.

You can also apply contextual classes such as .table-success or .table-danger to a whole table, a single <tr>, or one <td> to draw attention to specific data.

Responsive tables

Wide tables break small layouts. Wrap the table in .table-responsive (or a breakpoint variant like .table-responsive-md) and it gains horizontal scrolling on narrow screens instead of overflowing the page.

Badges for Counts and Labels

Badges are small inline labels, perfect for notification counts or status tags. They size themselves relative to their parent, so they work inside headings and buttons alike:

html

<h4>Inbox <span class="badge text-bg-primary">4</span></h4>
<button class="btn btn-secondary">
  Alerts <span class="badge text-bg-danger">9+</span>
</button>

In Bootstrap 5.2+ the text-bg-* helpers set both the background and a readable text color in one class. Add .rounded-pill for the classic pill-shaped counter. Remember that color alone does not convey meaning to screen readers, so include visually hidden text such as <span class="visually-hidden">unread messages</span> when the badge carries important information.

Alerts for Contextual Feedback

Alerts communicate success, warnings and errors after a user action. Combine .alert with a contextual class:

html

<div class="alert alert-success" role="alert">
  Profile saved successfully.
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  Your trial ends in 3 days.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

The second example is dismissible: the .btn-close button with data-bs-dismiss="alert" removes the alert when clicked, and fade show animates the transition. Inside an alert, use .alert-link on anchors and .alert-heading on headings so they match the alert color.

Progress Bars

Progress bars visualize how far along a task is. The outer .progress element is the track; the inner .progress-bar is filled to a width you control:

html

<div class="progress" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-info" style="width: 70%">70%</div>
</div>

Useful variations include .progress-bar-striped for a striped texture, adding .progress-bar-animated to make the stripes move, and background utilities such as .bg-success to recolor the bar. Stack several .progress-bar elements inside one wrapper to show multi-part progress, like storage used by different file types.

Putting It Together

These components shine when combined. A project dashboard might use a striped, hoverable table where each row shows a status badge and an inline progress bar, with a dismissible alert at the top summarizing recent activity. Because everything is utility-driven, the whole screen needs no custom CSS.

Key Takeaways

.table plus modifiers like .table-striped, .table-hover and .table-sm style data tables instantly; wrap wide tables in .table-responsive.
Badges use .badge with text-bg-* colors and .rounded-pill, and need visually hidden text for accessibility.
Alerts pair .alert with contextual classes; add .alert-dismissible, fade show and a .btn-close for closable messages.
Progress bars set width on .progress-bar inside .progress, with striped and animated variants.

Next up: bring motion and interactivity to your pages with Carousel, Accordion and Offcanvas components.