Upgrade to Pro
Get access to all features
- Advanced Analytics
- Team Collaboration
- API Access
Basic Tables
Bootstrap's tables are opt-in for better flexibility. Add the base class .table to
any <table> element, then enhance with modifier classes for various styling
options. Tables can be styled independently, allowing nested tables to have their own distinct
appearance.
Basic Example
Using the .table class, you can create a simple table with default styling.
Variants
Use contextual classes to color tables, table rows or individual cells.
Table Variants
Using the .table-primary class, you can create table with primary colored. also
have some more classes for table like :
.table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light,
.table-dark
Rows Variants
Using the
.table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light,
.table-dark
classes, you can create table with colored table rows.
Cells Variants
Using the
.table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light,
.table-dark
classes, you can create table with colored table cells.
Accented Tables
Striped Rows
Use .table-striped to add zebra-striping to any table column.
Striped Columns
Use .table-striped-columns to add zebra-striping to any table row within the
<tbody>
Hoverable Rows
Use .table-hover to enable a hover state on table rows within a
<tbody>
Active Tables
Highlight a table row or cell by adding a .table-active class.
Table Borders
Bordered Tables
Use .table-bordered for borders on all sides of the table and cells.
Tables Without Borders
Use .table-borderless for a table without borders.
Small Tables
Use .table-sm to make any .tablemore compact by cutting all cell
padding in half.
Table group dividers
Add a thicker border, darker between table groups—<thead>,
<tbody>, and <tfoot>—with
.table-group-divider. Customize the color by changing the
border-top-color (which we don't currently provide a utility class for at this
time).
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. Use the vertical align classes to re-align where needed.
Nesting
Border styles, active styles, and table variants are not inherited by nested tables.
Anatomy
Table Head
Similar to tables and dark tables, use the modifier classes .table-light or
.table-dark to make <thead>s appear light or dark.
Table Foot
Similar to tables and dark tables, use the modifier classes .table-light or
.table-dark to make <tfoot>s appear light or dark.
Table Captions
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.
You can also put the <caption> on the top of the table with
.caption-top.
Responsive Tables
Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive
across all viewports by wrapping a .table with .table-responsive. Or,
pick a maximum breakpoint with which to have a responsive table up to by using
.table-responsive[-sm|-md|-lg|-xl|-xxl] .
Always responsive
Across every breakpoint, use .table-responsive for horizontally scrolling tables.
Breakpoint Specific
Use .table-responsive[-sm|-md|-lg|-xl|-xxl] 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.
These tables may appear broken until their responsive styles apply at specific viewport widths.