Buy now
Tables
Examples for opt-in styling of tables.
Basic example
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| 4 | Jane | Birkins | Support | +3 774 28 50 |
<!-- Basic table -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jane</td>
<td>Birkins</td>
<td>Support</td>
<td>+3 774 28 50</td>
</tr>
</tbody>
</table>
</div>// Basic table
.table-responsive
table.table
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
tr
th(scope="row") 4
td Jane
td Birkins
td Support
td +3 774 28 50
Dark table
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| 4 | Jane | Birkins | Support | +3 774 28 50 |
<!-- Dark table -->
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jane</td>
<td>Birkins</td>
<td>Support</td>
<td>+3 774 28 50</td>
</tr>
</tbody>
</table>
</div>// Dark table
.table-responsive
table.table.table-dark
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
tr
th(scope="row") 4
td Jane
td Birkins
td Support
td +3 774 28 50
Table head options
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
<!-- Dark table head -->
<div class="table-responsive">
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>
<!-- Light table head -->
<div class="table-responsive">
<table class="table">
<thead class="thead-light">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>// Dark table head
.table-responsive
table.table
thead.thead-dark
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
// Light table head
.table-responsive
table.table
thead.thead-light
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
Striped rows
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
<!-- Light table with striped rows -->
<div class="table-responsive">
<table class="table table-striped">
<thead;>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>
<!-- Dark table with striped rows -->
<div class="table-responsive">
<table class="table table-dark table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>// Light table with striped rows
.table-responsive
table.table.table-striped
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
// Dark table with striped rows
.table-responsive
table.table.table-dark.table-striped
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
Bordered table
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
<!-- Light bordered table -->
<div class="table-responsive">
<table class="table table-bordered">
<thead;>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>
<!-- Dark bordered table -->
<div class="table-responsive">
<table class="table table-dark table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>// Light bordered table
.table-responsive
table.table.table-bordered
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
// Dark bordered table
.table-responsive
table.table.table-dark.table-bordered
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
Hoverable rows
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
| # | First Name | Last Name | Position | Phone |
|---|---|---|---|---|
| 1 | John | Doe | CEO, Founder | +3 555 68 70 |
| 2 | Anna | Cabana | Designer | +3 434 65 93 |
| 3 | Kale | Thornton | Developer | +3 285 42 88 |
<!-- Light table with hoverable rows -->
<div class="table-responsive">
<table class="table table-hover">
<thead;>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>
<!-- Dark table with hoverable rows -->
<div class="table-responsive">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Position</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>John</td>
<td>Doe</td>
<td>CEO, Founder</td>
<td>+3 555 68 70</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Anna</td>
<td>Cabana</td>
<td>Designer</td>
<td>+3 434 65 93</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Kale</td>
<td>Thornton</td>
<td>Developer</td>
<td>+3 285 42 88</td>
</tr>
</tbody>
</table>
</div>// Light table with hoverable rows
.table-responsive
table.table.table-hover
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
// Dark table with hoverable rows
.table-responsive
table.table.table-dark.table-hover
thead
tr
th #
th First Name
th Last Name
th Position
th Phone
tbody
tr
th(scope="row") 1
td John
td Doe
td CEO, Founder
td +3 555 68 70
tr
th(scope="row") 2
td Anna
td Cabana
td Designer
td +3 434 65 93
tr
th(scope="row") 3
td Kale
td Thornton
td Developer
td +3 285 42 88
Contextual colors
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Active | Column content | Column content |
| 2 | Default | Column content | Column content |
| 3 | Primary | Column content | Column content |
| 4 | Default | Column content | Column content |
| 7 | Secondary | Column content | Column content |
| 8 | Default | Column content | Column content |
| 9 | Success | Column content | Column content |
| 10 | Default | Column content | Column content |
| 11 | Info | Column content | Column content |
| 12 | Default | Column content | Column content |
| 13 | Warning | Column content | Column content |
| 14 | Default | Column content | Column content |
| 15 | Danger | Column content | Column content |
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
| 8 | Column content | Column content | Column content |
| 9 | Column content | Column content | Column content |
| 10 | Column content | Column content | Column content |
| 11 | Column content | Column content | Column content |
<!-- Light table with contextual rows -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Class</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Active</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-primary">
<th scope="row">2</th>
<td>Primary</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-secondary">
<th scope="row">4</th>
<td>Secondary</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-success">
<th scope="row">5</th>
<td>Success</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<th scope="row">6</th>
<td>Info</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<th scope="row">7</th>
<td>Warning</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<th scope="row">8</th>
<td>Danger</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
<!-- Dark table with contextual rows -->
<div class="table-responsive">
<table class="table table-dark">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="bg-primary">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-info">
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-warning">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="bg-danger">
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>// Light table with contextual rows
.table-responsive
table.table
thead
tr
th #
th Class
th Heading
th Heading
tbody
tr.table-active
th(scope="row'") 1
td Active
td Column content
td Column content
tr.table-primary
th(scope="row'") 2
td Primary
td Column content
td Column content
tr.table-secondary
th(scope="row'") 4
td Secondary
td Column content
td Column content
tr.table-success
th(scope="row'") 5
td Success
td Column content
td Column content
tr.table-info
th(scope="row'") 6
td Info
td Column content
td Column content
tr.table-warning
th(scope="row'") 7
td Warning
td Column content
td Column content
tr.table-danger
th(scope="row'") 8
td Danger
td Column content
td Column content
// Dark table with contextual rows
.table-responsive
table.table.table-dark
thead
tr
th #
th Column heading
th Column heading
th Column heading
tbody
tr.bg-primary
th(scope="row'") 1
td Column content
td Column content
td Column content
tr.bg-success
th(scope="row'") 3
td Column content
td Column content
td Column content
tr.bg-info
th(scope="row'") 4
td Column content
td Column content
td Column content
tr.bg-warning
th(scope="row'") 5
td Column content
td Column content
td Column content
tr.bg-danger
th(scope="row'") 6
td Column content
td Column content
td Column content