Tables

Basic table

Basic tables use the.table class for standard data display.

#	Name	Email	Status
1	John Doe	john@example.com	Active
2	Jane Smith	jane@example.com	Inactive

Striped tables use.table-striped to add zebra-striping to table rows.

#	Product	Price	Stock
1	MacBook Pro 16"	$2,499	In stock
2	Magic Mouse 2	$79	Out of stock
3	AirPods Max	$549	In stock

Use.table-striped-columns to add zebra-striping to table columns.

Metric	Q1 2026	Q2 2026	Q3 2026
Revenue	$45,200	$52,800	$61,400
Expenses	$18,400	$21,100	$23,500
Profit	$26,800	$31,700	$37,900

Hover tables use.table-hover to highlight rows on mouse over.

#	User	Role	Status
1	Jane Doe	Administrator	Active
2	Alex Smith	Editor	Active
3	Maria Garcia	Standard User	Pending

Bordered tables use.table-bordered to add borders on all sides of the table and cells.

#	Order ID	Date	Total
1	#ORD-1023	2026-08-10	$340.00
2	#ORD-1024	2026-08-11	$180.50
3	#ORD-1025	2026-08-12	$920.00

Add.table-borderless for a table without any cell borders.

#	Service	Plan	Billing
1	Cloud Hosting	Enterprise	Monthly
2	SSL Certificate	Wildcard	Annual
3	Dedicated IP	Add-on	Monthly

Add.table-group-divider totbody to add a thicker border separator.

Region	Direct Sales	Online Sales	Total
North America	$14,200	$28,900	$43,100
Europe	$9,800	$19,400	$29,200
Latin America	$6,500	$12,300	$18,800

Compact tables use.table-sm to cut cell padding in half.

#	File Name	Size	Format
1	annual_report_2026.pdf	1.2 MB	PDF
2	logo_vector.svg	48 KB	SVG
3	product_hero.webp	240 KB	WEBP

Use contextual classes like.table-primary,.table-success,.table-danger on rows or cells.

Class	Status	Description
`.table-primary`	Normal	Primary system notification
`.table-success`	Completed	Transaction verified
`.table-warning`	Warning	Server disk usage threshold
`.table-danger`	Error	Connection timeout occurred

Highlight a row using.table-active to denote selection or active state.

#	Server Name	IP Address	Ping
1	us-east-prod-01 (Active)	192.168.10.12	14 ms
2	us-west-prod-02	192.168.20.15	42 ms
3	eu-central-prod-01	192.168.30.22	98 ms

Use.align-middle to align cell contents vertically in table cells with avatars and action buttons.

Member	Role	Task Progress	Performance	Actions
JD Jane Doe jane.doe@example.com	Lead Architect	85%	+18.2%
AS Alex Smith alex.smith@example.com	Senior Dev	100%	+24.5%

A<caption> functions like a heading for a table and helps screen readers.

Top 4 active database nodes in production cluster
Node	Engine	Connections	CPU Load	Status
node-db-alpha-01	PostgreSQL 16	142 / 500	24%	Healthy
node-db-alpha-02	PostgreSQL 16	188 / 500	38%	Healthy
node-redis-cache-01	Redis 7.2	412 / 1000	12%	Healthy
node-elastic-search-01	Elasticsearch 8	88 / 200	65%	High Load