Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
Regular table
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| Footer | Footer | Footer | Footer |
Table head options
Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark to make <thead>s appear light or dark gray.
| # | thead-primary | Last Name | Username | Role |
|---|
| # | thead-secondary | Last Name | Username | Role |
|---|
| # | thead-success | Last Name | Username | Role |
|---|
| # | thead-warning | Last Name | Username | Role |
|---|
| # | thead-info | Last Name | Username | Role |
|---|
| # | thead-danger | Last Name | Username | Role |
|---|
| # | thead-dark | Last Name | Username | Role |
|---|
| # | thead-light | Last Name | Username | Role |
|---|
Table hover
Use the hover props to enable a hover state on <Table>.
| # | Products | Popularity | Sales |
|---|---|---|---|
| 1 | Milk Powder | 28.76% | |
| 2 | Air Conditioner | 8.55% | |
| 3 | RC Cars | 58.56% | |
| 4 | Down Coat | 35.76% |
Bordered table
Use the bordered props for borders on all sides of the table and cells.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Borderless table
Use the borderless props for a table without borders.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Striped table
Use the striped props to add zebra-striping to any table row within the <tbody>.
Large table
Use the size="lg" props to make tables large.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Small table
Use size="sm" to make tables more compact by cutting cell padding in half.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
Responsive table
Across every breakpoint, use responsive for horizontally scrolling tables. Responsive tables are wrapped automatically in a div. or Use responsive="sm", responsive="md", responsive="lg", or responsive="xl" as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.
| # | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading | Heading |
|---|---|---|---|---|---|---|---|---|---|
| 1 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 2 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
| 3 | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell | Cell |
Contextual classes
Use classes ( .active, .success, .info, .warning, .danger ) to color table rows or individual cells.
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| Active | Column content | Column content | Column content |
| Default | Column content | Column content | Column content |
| Primary | Column content | Column content | Column content |
| Secondary | Column content | Column content | Column content |
| Success | Column content | Column content | Column content |
| Danger | Column content | Column content | Column content |
| Warning | Column content | Column content | Column content |
| Info | Column content | Column content | Column content |
| Light | Column content | Column content | Column content |
| Dark | Column content | Column content | Column content |
Table search
Add class .table-filter in table tag. and add .table-search in input field.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Jens | Brincker | Brincker123 |
| 2 | Mark | Hay | Hay123 |
| 3 | Anthony | Davie | Davie123 |
| 4 | David | Perry | Perry123 |
| 5 | Anthony | Davie | Davie123 |
| 6 | Alan | Gilchrist | Gilchrist123 |