Bootstrap 5 responsive tables handle data display across all screen sizes. This page covers 4 responsive table patterns — horizontal scroll, breakpoints, fixed column and card view on mobile.

Quick Setup

Responsive 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

ClassWhat It Does
.table-responsiveAlways scrolls horizontally
.table-responsive-smScrolls below 576px
.table-responsive-mdScrolls below 768px
.table-responsive-lgScrolls below 992px
.table-responsive-xlScrolls below 1200px
position: sticky; left: 0Fixes a column while scrolling
overflow-x: autoThe CSS property that enables scrolling

1. Bootstrap 5 Responsive Table (Horizontal Scroll)

Wrap any table in table-responsive to enable horizontal scrolling on small screens. The table keeps its full layout.

2. Bootstrap 5 Responsive Table Breakpoints

Use table-responsive-{breakpoint} to only scroll below a specific screen size.

3. Bootstrap 5 Responsive Table with Fixed First Column

A responsive table where the first column stays fixed while other columns scroll horizontally.

4. Bootstrap 5 Table to Card View on Mobile

Table that converts to stacked card layout on mobile using CSS. Each row becomes a card.

Frequently Asked Questions

Wrap the table in a div with class table-responsive: <div class='table-responsive'><table class='table'>...</table></div>. This adds overflow-x: auto so the table scrolls horizontally on small screens instead of breaking the layout.
table-responsive always enables horizontal scrolling. table-responsive-md only enables scrolling on screens below 768px — on larger screens the table displays normally. Options: table-responsive-sm (576px), table-responsive-md (768px), table-responsive-lg (992px), table-responsive-xl (1200px).
Add position: sticky; left: 0 to the first column cells. Set a background color to prevent content showing through. Add z-index: 1 so the fixed column appears above scrolling columns. Works in all modern browsers.
Hide the thead with display:none on mobile. Set each tr to display:block. Set each td to display:flex justify-content:space-between. Use data-label attributes on tds and show them with td::before { content: attr(data-label) } to display column names in each cell.
The table-responsive div must directly wrap the table element. Check that you haven't added overflow:hidden to any parent element as this overrides the scroll. Also ensure you've included Bootstrap CSS. The table itself doesn't need any extra classes — only the wrapper div needs table-responsive.

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 →

Use code FIRST30 for 30% off your first purchase.

Related Components

Bootstrap 5 Table Example

View examples →

Bootstrap 5 Data Table

View examples →

Angular Bootstrap Table

View examples →