Table

  1. Tables
  2. Table

Simple Table

Using the most basic table markup, here’s how .table based tables look in Bootstrap.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
5 Samantha May Junior Technical Author $43,198

Striped Rows

Use .table-stripedto add zebra-striping to any table row within the .tbody.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
5 Samantha May Junior Technical Author $43,198

Bordered Table

Use .table-borderedto add zebra-striping to any table row within the .tbody.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
5 Samantha May Junior Technical Author $43,198

Hoverable Rows Table

Use .table-hoverto add zebra-striping to any table row within the .tbody.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
5 Samantha May Junior Technical Author $43,198

Borderless Table

Use .table-borderlessto add zebra-striping to any table row within the .tbody.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100

Small Table

Add .table-sm to make any .table more compact by cutting all cell padding in half.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
5 Samantha May Junior Technical Author $43,198

Nested Table

Border styles, active styles, and table variants are not inherited by nested tables.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100
5 Samantha May Junior Technical Author $43,198

Contextual Table

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

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Gavin Gibson Account manager $230,540
4 Julian Kerr Senior Javascript Developer $55,300
5 Cedric Kelly Accountant $234,100
6 Cedric Kelly Accountant $234,100
7 Cedric Kelly Accountant $234,100
8 Cedric Kelly Accountant $234,100
9 Cedric Kelly Accountant $234,100

Table head

Similar to tables and dark tables, use the modifier classes .table-primary or .table-dark to make <thead>

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100

Table Dark

Use .table-darkto add zebra-striping to any table row within the .tbody.

ID Name Position Salary
1 Joan Powell Associate Developer $450,870
2 Gavin Gibson Account manager $230,540
3 Julian Kerr Senior Javascript Developer $55,300
4 Cedric Kelly Accountant $234,100