Basic table
Using the most basic table markup, here’s how Table-based tables look.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Contextual colors
Use variant property to apply contextual colors
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
Hoverable
Add hover property to enable hover effect on table rows within a <tbody>.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Border variants
Change the table border style by applying bordered|borderless properties.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Striped
Use striped property to add zebra-striping to any table row within the <tbody>.
| # | Head | Head | Head |
|---|---|---|---|
| 1 | Data | Data | Data |
| 2 | Data | Data | Data |
| 3 | Data | Data | Data |
Responsive table
Make your tables always responsive, use responsive property for horizontally scrolling tables.
Fill responsive with sm|md|lg|xl as needed to create responsive tables up to a particular breakpoint.
| # | Head | Head | Head | Head | Head | Head | Head | Head | Head | Head | Head | Head |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| 2 | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
| 3 | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data | Data |
Small table
Add small property 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 | ||