Table

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

table

.table
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Variants

.table-* = {primary, secondary, warning, success, danger, dark, light, etc.}

Use contextual classes to color tables, table rows or individual cells.

Striped rows

.table-striped
# First Name Last Name
1 Don Juan
2 John Nis
3 Diego Silang

# Name Age
1 John 34
2 Ben 50
3 Welson 35

# Name Age
1 John 34
2 Ben 50
3 Welson 35

Active tables

.table-active
# Name Location Site
1 Jessie Aglipay niceonedotcom
2 Nestor Bato callmetoday.ph
3 Larry the Bird @twitter
4 Junrel Loga sitemeagain

Bordered

.table-bordered
# Name Location Site
1 Jessie Aglipay niceonedotcom
2 Nestor Bato callmetoday.ph
3 Larry the Bird @twitter
4 Junrel Loga sitemeagain

without borders

.table-borderless
# Name Location Site
1 Jessie Aglipay niceonedotcom
2 Nestor Bato callmetoday.ph
3 Junrel Loga sitemeagain

small table

.table .table-sm
# normal high
1 yes yes
2 no no

Vertical Align

.table .table-sm
# Green Yellow
1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam, doloribus. This may inherit from the parent class (middle)
2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae. this align to the bottom of the cell from tr element
3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente repellendus totam incidunt molestiae nihil dolorum enim sit itaque, vel nostrum et debitis deserunt iste asperiores velit iure ut ab cum id cumque voluptates corrupti. Perferendis facilis nulla vero placeat architecto? This will inherit from parent element (middle) This cell is aligned to the top.
table
<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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Overview

Due to the widespread use of <table> elements across third-party widgets like calendars and date pickers, Bootstrap’s tables are opt-in. Add the base class .table to any <table>, then extend with our optional modifier classes or custom styles. All table styles are not inherited in Bootstrap, meaning any nested tables can be styled independent from the parent. Using the most basic table markup, here’s how .table-based tables look in Bootstrap.

Variants
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Striped rows
<table class="table table-striped">
...
</table>
<table class="table table-dark table-striped">
...
</table>
<table class="table table-success table-striped">
...
</table>
<table class="table table-hover">
...
</table>

You can combined
.table-striped and .table-hover

Hightlight Cell
<table class="table">
<thead>
...
</thead>
<tbody>
<tr class="table-active">
...
</tr>
<tr>
...
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2" class="table-active">Larry the Bird</td>
<td>@twitter</td>
</tr>
<tr>
. . .
</tr>
</tbody>
</table>
Borderless
<table class="table table-borderless">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Location</th>
<th>Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jessie</td>
<td>Aglipay</td>
<td>niceonedotcom</td>
</tr>
<tr>
<td>2</td>
<td>Nestor</td>
<td>Bato</td>
<td>callmetoday.ph</td>
</tr>
<tr>
<td>3</td>
<td>Junrel</td>
<td>Loga</td>
<td>sitemeagain</td>
</tr>
</tbody>
</table>
Vertical align
<div class="table-responsive">
<table class="table align-middle">
<thead>
<tr>
<td>#</td>
<td>Green</td>
<td>Yellow</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>no</td>
<td>yes</td>
</tr>
<tr class="align-bottom">
<td>2</td>
<td>no</td>
<td>no</td>
</tr>
<tr>
<td>2</td>
<td>yes</td>
<td class="align-top">This cell is aligned to the top.</td>
</tr>
</tbody>
</table>
</div>