General Tables
Default Table
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Dark Table
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Active Table
Highlight a table row or cell by adding a .table-active class.
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Tables without borders
Add .table-borderless for a table without borders.
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Table Variants
Use contextual classes .table-primary .table-secondary .table-success .table-danger .table-warning .table-info .table-light .table-dark to color tables, table rows or individual cells.
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
Table with stripped rows
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Table with hoverable rows
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Bordered Table
Add .table-bordered for borders on all sides of the table and cells.
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Border color utilities can be added to change colors:
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |
Small tables
Add .table-sm to make any .table more compact by cutting all cell padding in half.
| # | Name | Position | Age | Start Date |
|---|---|---|---|---|
| 1 | Brandon Jacob | Designer | 28 | 2016-05-25 |
| 2 | Bridie Kessler | Developer | 35 | 2014-12-05 |
| 3 | Ashleigh Langosh | Finance | 45 | 2011-08-12 |
| 4 | Angus Grady | HR | 34 | 2012-06-11 |
| 5 | Raheem Lehner | Dynamic Division Officer | 47 | 2011-04-19 |