What Is Bootstrap 5 Table Classes?
Bootstrap 5 table classes are opt-in CSS classes that style standard HTML tables: the base .table class adds consistent padding, borders and typography, and modifiers such as .table-striped, .table-hover, .table-bordered and .table-sm change their appearance. Wrapping a table in .table-responsive lets it scroll horizontally on small screens instead of breaking the layout.
What Are Bootstrap 5 Table Classes?
HTML tables are for tabular data such as pricing comparisons, schedules, specifications and reports. Browsers give them almost no styling, so Bootstrap adds a set of classes. The base .table class is opt-in rather than applied to every <table>, because tables are also used inside third-party widgets such as calendars and date pickers that should not inherit Bootstrap's styles. Modifiers cover appearance (.table-striped for zebra rows, .table-striped-columns, .table-hover for highlighting rows on hover, .table-bordered, .table-borderless, and .table-sm for compact cells), colour (.table-dark, .table-light, contextual classes such as .table-primary, .table-success and .table-danger on rows or cells, and .table-active to highlight a row) and layout (.table-group-divider for a thicker border between <thead> and <tbody>, .caption-top to move the caption above the table, and vertical alignment with .align-middle). Responsive wrappers handle overflow on narrow screens.
How Bootstrap 5 Table Classes Work
In Bootstrap 5.3, .table sets width: 100%, a bottom margin and cell padding of .5rem, and draws horizontal borders between rows in the theme border colour. Its styles are driven by local CSS variables such as --bs-table-bg, --bs-table-striped-bg, --bs-table-hover-bg and --bs-table-border-color, so the modifier classes work by changing those variables rather than rewriting the rules. .table-striped shades every odd row in the <tbody>, .table-hover shades a row when the pointer is over it, and .table-sm halves the cell padding. Colour classes such as .table-dark or .table-primary set the background and border variables, and they can be applied to the whole table, a <thead>, a row or a single cell. For responsiveness, .table-responsive on a wrapping <div> adds overflow-x: auto, so a wide table scrolls within its container at every screen size; breakpoint versions such as .table-responsive-md only scroll below that breakpoint (768px for md) and display normally above it. A typical pattern is <div class="table-responsive"><table class="table table-striped table-hover align-middle"><caption>...</caption><thead class="table-light">...</thead><tbody>...</tbody></table></div>. Bootstrap also styles <th> cells and <caption> elements, so semantic table markup looks right without extra classes.
Best Practices for Bootstrap 5 Table Classes
Use tables only for tabular data, never for page layout, and write them semantically: put column headings in <thead> with <th scope="col">, use <th scope="row"> for row headings, and add a <caption> that describes the table, which screen readers announce and which you can hide visually with .visually-hidden if the design already has a heading. Always wrap tables with more than a few columns in .table-responsive, so mobile visitors scroll the table rather than the whole page. For very wide data, consider whether a stacked card or definition-list layout would be easier to read on phones. Right-align numeric columns with .text-end and use tabular figures (font-variant-numeric: tabular-nums) so digits line up. Use .table-striped or .table-hover on long tables to help the eye follow rows, and avoid relying on colour alone to convey meaning, such as positive and negative values; add a symbol or text label as well. Use .table-sm for dense data such as admin dashboards and the default padding for public pages. Avoid combining .table-bordered with heavy striping and several colour classes on the same table, which creates visual noise. For large datasets, add pagination, sorting or filtering, and render only the rows people need rather than thousands at once.
Bootstrap 5 Table Classes and Canvas Builder
Canvas Builder outputs Bootstrap 5 HTML, so comparison tables, pricing matrices and schedules in generated pages can use the standard table classes, and you can refine them in the exported code, for example by adding .table-responsive or a <caption>. Describe the columns and rows you need in your prompt, then check the generated table on a phone-sized screen before you publish.
Frequently asked questions
How do I make a Bootstrap 5 table responsive?
Wrap the <table> in a <div class="table-responsive">. The table then scrolls horizontally inside its container on any screen that is too narrow for it. To scroll only on smaller screens, use a breakpoint version such as .table-responsive-lg, which scrolls below 992px.
How do I add striped rows to a Bootstrap table?
Add .table-striped alongside .table, for example <table class="table table-striped">, to shade every other row in the body. Bootstrap 5.2 and later also offer .table-striped-columns for striped columns. You can change the stripe colour through the --bs-table-striped-bg CSS variable.
How do I change the header colour of a Bootstrap 5 table?
Add a colour class to the <thead>, such as .table-light or .table-dark, or a contextual class such as .table-primary. These set the background, text and border colours for that section. For a custom colour, set --bs-table-bg on the header in your own CSS.
Are Bootstrap tables accessible?
Bootstrap styles the table, but accessibility depends on your markup. Use <th> elements with scope attributes and a <caption> describing the table, and avoid complex merged cells where possible. The responsive wrapper keeps the table usable on small screens without hiding any data.