Highlight a table row or cell by adding a .table-active class.
Sample Code
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="bd-example"><tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><trclass="table-active"><thscope="row">1</th><td>Abc</td><td>Abc</td><td>Kaashiv@gmail.com</td></tr><tr><thscope="row">2</th><td>Abc</td><td>Abc</td><td>Wikitechy@gmail.com</td></tr><tr><thscope="row">3</th><tdcolspan="2"class="table-active">Larry the Bird</td><td>KaashivInfotech@gmail.com</td></tr></tbody></table></div></body></html>
Output
Bootstrap Bordered Tables
Add .table-bordered for borders on all sides of the table and cells.
Sample Code
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="bd-example"><tableclass="table table-bordered border-primary"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Abc</td><td>Abc</td><td>Kaashiv@gmil.com</td></tr><tr><thscope="row">2</th><td>Abc</td><td>Abc</td><td>Wikitechy@gmail.com</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>KaashivInfotech@gmail.com</td></tr></tbody></div></body></html>
Output
Bootstrap Tables without Borders
Bootstrap provides a simple way to create tables without borders. You can achieve this effect by adding the "table-borderless" class to your table.
Sample Code
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="bd-example"><tableclass="table table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Abc</td><td>Abc</td><td>Kaashiv@gmail.com</td></tr><tr><thscope="row">2</th><td>Abc</td><td>Abc</td><td>Wikitechy@gmail.com</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>KaashivInfotech@gmail.com</td></tr></tbody></div></body></html>
Output
Bootstrap Small tables
Add .table-sm to make tables more compact by cutting cell padding in half.
Sample Code
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><body><divclass="table table-sm"><tableclass="table table-borderless"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Abc</td><td>Abc</td><td>Kaashiv@gmail.com</td></tr><tr><thscope="row">2</th><td>Abc</td><td>Abc</td><td>Wikitechy@gmail.com</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>KaashivInfotech@gmail.com</td></tr></tbody></table></div></body></html>
Output
Bootstrap Table Group Dividers
A thicker border, darker between table groups— <thead>, <tbody>, and <tfoot>—with .table-group-divider. Customize the color by changing the border-top-color.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbodyclass="table-group-divider"><tr><thscope="row">1</th><td>Abc</td><td>Abc</td><td>Kaashiv@gmail.com</td></tr><tr><thscope="row">2</th><td>Abc</td><td>Abc</td><td>Wikitechy@gmail.com</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>KaashivInfotech@gmail.com</td></tr></tbody></table></body></html>
Output
Bootstrap Table Vertical alignment
Table cells of <thead> are always vertical aligned to the bottom.
Table cells in <tbody> inherit their alignment from <table> and are aligned to the top by default.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><divclass="bd-example"><divclass="table-responsive"><tableclass="table align-middle"><thead><tr><thscope="col"class="w-25">Heading 1</th><thscope="col"class="w-25">Heading 2</th><thscope="col"class="w-25">Heading 3</th><thscope="col"class="w-25">Heading 4</th></tr></thead><tbody><tr><td>This cell inherits <code>vertical-align: middle;</code> from the table</td><td>This cell inherits <code>vertical-align: middle;</code> from the table</td><td>This cell inherits <code>vertical-align: middle;</code> from the table</td><td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td></tr><trclass="align-bottom"><td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td><td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td><td>This cell inherits <code>vertical-align: bottom;</code> from the table row</td><td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td></tr><tr><td>This cell inherits <code>vertical-align: middle;</code> from the table</td><td>This cell inherits <code>vertical-align: middle;</code> from the table</td><tdclass="align-top">This cell is aligned to the top.</td><td>This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells.</td></tr></tbody></table></div></div></body></html>
Output
Bootstrap Table Nesting
Bootstrap provides a way to create nested tables, which can be useful when you want to display hierarchical data or when you need to present related data in a structured way.
To create a nested table in Bootstrap, you can use the same HTML structure as for a regular table, but place one table within another.
To create a table head in Bootstrap, you can use the <thead> element. Inside the <thead> element, you can define the table header row using the <tr> element, and then specify the header cells using the <th> element.
In Bootstrap, a table footer can be created using the <tfoot> element. The table footer is used to display summary information or other types of data related to the table.
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><divclass="bd-example"><tableclass="table"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Abc</td><td>Abc</td><td>Kaashiv@gmail.com</td></tr><tr><thscope="row">2</th><td>Abc</td><td>Abc</td><td>Wikitechy@gmail.com</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>KaashivInfotech@gmail.com</td></tr></tbody></table></div></body></html>
Output
Bootstrap Table Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
