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 |
# | 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>
<!-- Table with color border. Supports all theme colors -->
<div class="table-responsive">
<table class="table table-bordered border-primary">
...
</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
// Table with color border. Supports all theme colors
.table-responsive
table.table.table-bordered.border-primary
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 |
5 | Accent | Column content | Column content |
6 | 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 |
<!-- 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-accent">
<th scope="row">3</th>
<td>Accent</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>
// 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-accent
th(scope="row'") 3
td Accent
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