Tables

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

Examples

Basic

Quickly create a table style with the .table class as <table class="table">.

This caption example was created with <caption></caption>.
# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Dark Basic

As easy as adding the table-dark class to the table as <table class="table-dark">!

# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Table Head Options

Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark in your <thead> for a light or dark gray appearance. For example, <thead class="thead-dark"> or <thead class="thead-light">.

# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum
# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Striped Rows

Use the .table-striped class with basic or dark tables to add zebra-striping to any table. <table class="table table-striped"> or <table class="table table-dark table-striped">

# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum
# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Bordered table

Add .table-bordered for borders on all sides of the table and cells. Available for both basic and dark tables. <table class="table table-bordered"> or <table class="table table-dark table-bordered">

# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum
# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>. <table class="table table-hover"> or <table class="table table-dark table-hover">

# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum
# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Small table

Add .table-sm to make tables more compact by cutting cell padding in half. <table class="table table-sm"> or <table class="table table-dark table-sm">

# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum
# First Name Last Name Username
1 Antone Baumbach @eveniet
2 Arne Orn @magnam
3 Delfina Larkin @nostrum

Contextual classes

Use contextual classes to color table rows or individual cells.

Type Row Code Cell Code
primary <tr class="table-primary">...</tr> <td class="table-primary">...</td>
secondary <tr class="table-secondary">...</tr> <td class="table-secondary">...</td>
success <tr class="table-success">...</tr> <td class="table-success">...</td>
info <tr class="table-info">...</tr> <td class="table-info">...</td>
warning <tr class="table-warning">...</tr> <td class="table-warning">...</td>
danger <tr class="table-danger">...</tr> <td class="table-danger">...</td>
light <tr class="table-light">...</tr> <td class="table-light">...</td>
dark <tr class="table-dark">...</tr> <td class="table-dark">...</td>

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

Type Row Code Cell Code
primary <tr class="bg-primary">...</tr> <td class="bg-primary">...</td>
secondary <tr class="bg-secondary">...</tr> <td class="bg-secondary">...</td>
success <tr class="bg-success">...</tr> <td class="bg-success">...</td>
info <tr class="bg-info">...</tr> <td class="bg-info">...</td>
warning <tr class="bg-warning">...</tr> <td class="bg-warning">...</td>
danger <tr class="bg-danger">...</tr> <td class="bg-danger">...</td>
light <tr class="bg-light">...</tr> <td class="bg-light">...</td>
dark <tr class="bg-dark">...</tr> <td class="bg-dark">...</td>