Bootstrap 5 Table Example

Bootstrap 5 tables are used to display data in rows and columns. This page covers 6 table styles — basic, striped, bordered, hover, dark and responsive — each ready to copy directly into your project.

Quick Setup

Tables need only Bootstrap 5 CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

Key Classes Reference

Class	What It Does
`.table`	Required base class for all Bootstrap tables
`.table-striped`	Alternating row background colors
`.table-striped-columns`	Alternating column background colors
`.table-bordered`	Borders on all cells
`.table-borderless`	Removes all borders
`.table-hover`	Highlights rows on hover
`.table-dark`	Dark background theme
`.table-sm`	Compact table with less padding
`.table-responsive`	Horizontal scroll on small screens
`.table-primary`	Blue header or row highlight
`.table-success`	Green row highlight
`.table-warning`	Yellow row highlight

1. Basic Bootstrap 5 Table

A simple table with Bootstrap 5 table class. Clean and minimal with no extra styling.

2. Bootstrap 5 Striped Table

Alternating row colors using table-striped. Add table-striped-columns for column striping instead.

3. Bootstrap 5 Bordered Table

Table with borders on all cells using table-bordered. Use table-borderless to remove all borders.

4. Bootstrap 5 Hover Table

Rows highlight on hover using table-hover. Combine with table-striped for better readability.

5. Bootstrap 5 Dark Table

Dark themed table using table-dark. Works great inside dark dashboards and admin panels.

6. Bootstrap 5 Responsive Table

Wrap table in table-responsive to enable horizontal scrolling on small screens.

Frequently Asked Questions

How do I make a Bootstrap 5 table responsive?▲

Wrap the table in a div with class table-responsive: <div class='table-responsive'><table class='table'>...</table></div>. This adds horizontal scrolling on small screens. Use table-responsive-md to only enable scrolling below the md breakpoint.

How do I add alternating row colors in Bootstrap 5 table?▼

Add table-striped class to the table element: <table class='table table-striped'>. For column striping instead of rows, use table-striped-columns. In Bootstrap 5.2+ you can also use data-bs-theme='dark' for dark striped tables.

How do I fix the Bootstrap 5 table header?▼

Use the sticky-top class on thead: <thead class='sticky-top'>. Wrap the table in a div with a fixed height and overflow-y: auto to create a scrollable table with a fixed header.

How do I highlight a specific row in Bootstrap 5 table?▼

Use contextual color classes on tr elements: table-primary, table-success, table-warning, table-danger, table-info. Example: <tr class='table-success'> highlights that row in green.

How do I add a search filter to Bootstrap 5 table?▼

Bootstrap doesn't include built-in table search. Add an input above the table and use JavaScript to filter rows: input.addEventListener('input', () => { rows.forEach(row => { row.style.display = row.textContent.toLowerCase().includes(input.value.toLowerCase()) ? '' : 'none' }) })

Need a Full Bootstrap 5 Admin Dashboard?

Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.

Browse Templates →