Table example 1

Component
Name	Table
Description	Wikitext tables with Bootstrap's table classes
Provider	Skin
Reference	getbootstrap.com - tables
Styling	For all possible color styles and corresponding examples, see colors.

Basic table

Code

{| class="table"
! Breakpoint !! Class infix !! Dimensions
|-
| Extra small || ''None'' || <576px
|-
| Small || <code>sm</code> || ≥576px
|-
| Medium || <code>md</code> || ≥768px
|-
| Large || <code>lg</code> || ≥992px
|-
| Extra large || <code>xl</code> || ≥1200px
|-
| Extra extra large || <code>xxl</code> || ≥1400px
|}

Result

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Striped rows and hover

Code

{| class="table table-striped table-hover"
! Breakpoint !! Class infix !! Dimensions
|-
| Extra small || ''None'' || <576px
|-
| Small || <code>sm</code> || ≥576px
|-
| Medium || <code>md</code> || ≥768px
|-
| Large || <code>lg</code> || ≥992px
|-
| Extra large || <code>xl</code> || ≥1200px
|-
| Extra extra large || <code>xxl</code> || ≥1400px
|}

Result

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Borders and small cells

Code

{| class="table table-bordered table-sm"
! Breakpoint !! Class infix !! Dimensions
|-
| Extra small || ''None'' || <576px
|-
| Small || <code>sm</code> || ≥576px
|-
| Medium || <code>md</code> || ≥768px
|-
| Large || <code>lg</code> || ≥992px
|-
| Extra large || <code>xl</code> || ≥1200px
|-
| Extra extra large || <code>xxl</code> || ≥1400px
|}

Result

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Contextual classes

A class on the row line colors a whole row, a class in front of a cell colors that cell.

Code

{| class="table"
! Breakpoint !! Class infix !! Dimensions
|-
| Extra small || ''None'' || <576px
|-
| Small || <code>sm</code> || ≥576px
|- class="table-primary"
| Medium || <code>md</code> || ≥768px
|-
| Large || <code>lg</code> || ≥992px
|-
| Extra large || <code>xl</code> || class="table-warning" | ≥1200px
|-
| Extra extra large || <code>xxl</code> || ≥1400px
|}

Result

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Responsive table

The table-responsive wrapper lets a wide table scroll sideways on narrow screens.

Code

<div class="table-responsive">
{| class="table table-bordered text-nowrap"
! !! xs<br><576px !! sm<br>≥576px !! md<br>≥768px !! lg<br>≥992px !! xl<br>≥1200px !! xxl<br>≥1400px
|-
! Container <code>max-width</code>
| None (auto) || 540px || 720px || 960px || 1140px || 1320px
|-
! Class prefix
| <code>.col-</code> || <code>.col-sm-</code> || <code>.col-md-</code> || <code>.col-lg-</code> || <code>.col-xl-</code> || <code>.col-xxl-</code>
|}
</div>

Result

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
Container max-width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!