brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Tables

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Regular table

Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer 
														
<table class="table">
	<thead>
		<tr>
		<th scope="col">#</th>
		<th scope="col">First</th>
		<th scope="col">Last</th>
		<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
		<th scope="row">1</th>
		<td>Mark</td>
		<td>Otto</td>
		<td>@mdo</td>
		</tr>
		<tr>
		<th scope="row">2</th>
		<td>Jacob</td>
		<td>Thornton</td>
		<td>@fat</td>
		</tr>
		<tr>
		<th scope="row">3</th>
		<td>Larry</td>
		<td>the Bird</td>
		<td>@twitter</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		<td>Footer</td>
		</tr>
	</tfoot>
</table>
Table head options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.

# thead-primary Last Name Username Role
# thead-secondary Last Name Username Role
# thead-success Last Name Username Role
# thead-warning Last Name Username Role
# thead-info Last Name Username Role
# thead-danger Last Name Username Role
# thead-dark Last Name Username Role
# thead-light Last Name Username Role 
														
<table class="table">
	<thead class="thead-primary">
		<tr>
			<th>#</th>
			<th class="w-30">thead-primary</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-secondary">
		<tr>
			<th>#</th>
			<th class="w-30">thead-secondary</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-success">
		<tr>
			<th>#</th>
			<th class="w-30">thead-success</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-warning">
		<tr>
			<th>#</th>
			<th class="w-30">thead-warning</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-info">
		<tr>
			<th>#</th>
			<th class="w-30">thead-info</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table">
	<thead class="thead-danger">
		<tr>
			<th>#</th>
			<th class="w-30">thead-danger</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
	<thead class="thead-dark">
		<tr>
			<th>#</th>
			<th class="w-30">thead-dark</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
</div>
<div class="table-responsive">
<table class="table mb-0">
	<thead class="thead-light">
		<tr>
			<th>#</th>
			<th class="w-30">thead-light</th>
			<th>Last Name</th>
			<th>Username</th>
			<th>Role</th>
		</tr>
	</thead>
</table>
Table hover

Add .table-hover to enable a hover state on table rows within a <tbody>.

# Products Popularity Sales
1 Milk Powder
28.76%
2 Air Conditioner
8.55%
3 RC Cars
58.56%
4 Down Coat
35.76% 
														
<table class="table table-hover mb-0">
	<thead>
		<tr>
			<th>#</th>
			<th>Products</th>
			<th>Popularity</th>
			<th>Sales</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Milk Powder</td>
			<td class="peity-gradient"><div id="sparkline_chart_t1"></div> </td>
			<td><span class="text-danger"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 28.76%</span> </td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Air Conditioner</td>
			<td class="peity-gradient"><div id="sparkline_chart_t2"></div> </td>
			<td><span class="text-warning"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 8.55%</span> </td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td>RC Cars</td>
			<td class="peity-gradient"><div id="sparkline_chart_t3"></div> </td>
			<td><span class="text-success"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 58.56%</span> </td>
		</tr>
		<tr>
			<th scope="row">4</th>
			<td>Down Coat</td>
			<td class="peity-gradient"><div id="sparkline_chart_t4"></div> </td>
			<td><span class="text-info"><span class="feather-icon fe-x"><i data-feather="trending-up"></i></span> 35.76%</span> </td>
		</tr>
	</tbody>
</table>
Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
														
<table class="table table-bordered  mb-0">
<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">First</th>
		<th scope="col">Last</th>
		<th scope="col">Handle</th>
	</tr>
</thead>
<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Mark</td>
		<td>Otto</td>
		<td>@mdo</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Jacob</td>
		<td>Thornton</td>
		<td>@fat</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td colspan="2">Larry the Bird</td>
		<td>@twitter</td>
	</tr>
</tbody>
</table>
Borderless table

Add .table-borderless for a table without borders.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
														
<table class="table table-borderless  mb-0">
	<thead>
		<tr>
			<th scope="col">#</th>
			<th scope="col">First</th>
			<th scope="col">Last</th>
			<th scope="col">Handle</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">1</th>
			<td>Mark</td>
			<td>Otto</td>
			<td>@mdo</td>
		</tr>
		<tr>
			<th scope="row">2</th>
			<td>Jacob</td>
			<td>Thornton</td>
			<td>@fat</td>
		</tr>
		<tr>
			<th scope="row">3</th>
			<td colspan="2">Larry the Bird</td>
			<td>@twitter</td>
		</tr>
	</tbody>
</table>
Striped table

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Task Progress Deadline Action
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015 
														
<table class="table table-hover table-striped mb-0">
<thead>
	<tr>
		<th>Task</th>
		<th>Progress</th>
		<th>Deadline</th>
		<th>Action</th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>Lunar probe project</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-danger" style="width: 35%"></div>
			</div>
		</td>
		<td>May 15, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Dream successful plan</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
			</div>
		</td>
		<td>July 1, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Office automatization</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-success" style="width: 100%"></div>
			</div>
		</td>
		<td>Apr 12, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>The sun climbing plan</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-primary" style="width: 70%"></div>
			</div>
		</td>
		<td>Aug 9, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Open strategy</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-primary" style="width: 85%"></div>
			</div>
		</td>
		<td>Apr 2, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
	<tr>
		<td>Tantas earum numeris</td>
		<td>
			<div class="progress progress-bar-xs mb-0 ">
				<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
			</div>
		</td>
		<td>July 11, 2015</td>
		<td>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-primary flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Edit"><span class="icon"><span class="feather-icon"><i data-feather="edit-3"></i></span></span></a>
			<a href="#" class="btn btn-icon btn-rounded btn-flush-danger flush-soft-hover" data-bs-toggle="tooltip" data-bs-original-title="Delete"><span class="icon"><span class="feather-icon"><i data-feather="trash-2"></i></span></span></a>
		</td>
	</tr>
</tbody>
</table>
Large table

Add class .table-lg to make tables large.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
														
<table class="table table-lg">
<thead>
	<tr>
	<th scope="col">#</th>
	<th scope="col">First</th>
	<th scope="col">Last</th>
	<th scope="col">Handle</th>
	</tr>
</thead>
<tbody>
	<tr>
	<th scope="row">1</th>
	<td>Mark</td>
	<td>Otto</td>
	<td>@mdo</td>
	</tr>
	<tr>
	<th scope="row">2</th>
	<td>Jacob</td>
	<td>Thornton</td>
	<td>@fat</td>
	</tr>
	<tr>
	<th scope="row">3</th>
	<td colspan="2">Larry the Bird</td>
	<td>@twitter</td>
	</tr>
</tbody>
</table>
Small table

Add class .table-sm to make tables more compact by cutting cell padding in half.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
														
<table class="table table-sm">
<thead>
	<tr>
	<th scope="col">#</th>
	<th scope="col">First</th>
	<th scope="col">Last</th>
	<th scope="col">Handle</th>
	</tr>
</thead>
<tbody>
	<tr>
	<th scope="row">1</th>
	<td>Mark</td>
	<td>Otto</td>
	<td>@mdo</td>
	</tr>
	<tr>
	<th scope="row">2</th>
	<td>Jacob</td>
	<td>Thornton</td>
	<td>@fat</td>
	</tr>
	<tr>
	<th scope="row">3</th>
	<td colspan="2">Larry the Bird</td>
	<td>@twitter</td>
	</tr>
</tbody>
</table>
Responsive table

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}.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell 
														
<div class="table-responsive">
<table class="table">
	<thead>
	<tr>
		<th scope="col">#</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
		<th scope="col">Heading</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<th scope="row">1</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">2</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	<tr>
		<th scope="row">3</th>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
		<td>Cell</td>
	</tr>
	</tbody>
</table>
</div>
Contextual classes

Use classes ( .active, .success, .info, .warning, .danger ) to color table rows or individual cells.

# Column heading Column heading Column heading
Active Column content Column content Column content
Default Column content Column content Column content
Primary Column content Column content Column content
Secondary Column content Column content Column content
Success Column content Column content Column content
Danger Column content Column content Column content
Warning Column content Column content Column content
Info Column content Column content Column content
Light Column content Column content Column content
Dark Column content Column content Column content 
														
<table class="table mb-0">
<thead>
	<tr>
		<th>#</th>
		<th>Column heading</th>
		<th>Column heading</th>
		<th>Column heading</th>
	</tr>
</thead>
<tbody>
	<tr class="table-active">
		<th scope="row">Active</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr>
		<th scope="row">Default</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-primary">
		<th scope="row">Primary</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-secondary">
		<th scope="row">Secondary</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-success">
		<th scope="row">Success</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-danger">
		<th scope="row">Danger</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-warning">
		<th scope="row">Warning</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-info">
		<th scope="row">Info</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-light">
		<th scope="row">Light</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
	<tr class="table-dark">
		<th scope="row">Dark</th>
		<td>Column content</td>
		<td>Column content</td>
		<td>Column content</td>
	</tr>
</tbody>
</table>
Table search

Add class .table-filter in table tag. and add .table-search in input field.

# First Name Last Name Username
1 Jens Brincker Brincker123
2 Mark Hay Hay123
3 Anthony Davie Davie123
4 David Perry Perry123
5 Anthony Davie Davie123
6 Alan Gilchrist Gilchrist123 
														
<input class="form-control mb-2 table-search" id="" type="text" placeholder="Search...">
<div class="table-responsive">
	<table class="table table-hover table-filter mb-0">
		<thead>
			<tr>
				<th>#</th>
				<th>First Name</th>
				<th>Last Name</th>
				<th>Username</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">1</th>
				<td>Jens</td>
				<td>Brincker</td>
				<td>Brincker123</td>
			</tr>
			<tr>
				<th scope="row">2</th>
				<td>Mark</td>
				<td>Hay</td>
				<td>Hay123</td>
			</tr>
			<tr>
				<th scope="row">3</th>
				<td>Anthony</td>
				<td>Davie</td>
				<td>Davie123</td>
			</tr>
			<tr>
				<th scope="row">4</th>
				<td>David</td>
				<td>Perry</td>
				<td>Perry123</td>
			</tr>
			<tr>
				<th scope="row">5</th>
				<td>Anthony</td>
				<td>Davie</td>
				<td>Davie123</td>
			</tr>
			<tr>
				<th scope="row">6</th>
				<td>Alan</td>
				<td>Gilchrist</td>
				<td>Gilchrist123</td>
			</tr>
		</tbody>
	</table>
</div>
													
														
$(".table-search").on("keyup", function() {
	var value = $(this).val().toLowerCase();
	$(".table-filter tbody tr").filter(function() {
		$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
	});
});
Jump to