Basic Table
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Striped Table
Use .table-striped to add zebra-striping to any table row within the <tbody>. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Bordered Table
Add .table-bordered for borders on all sides of the table and cells. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Borderless Table
Add .table-borderless for borders on all sides of the table and cells. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Hoverable Rows
Add .table-hover for borders on all sides of the table and cells. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Contextual Table
Use contextual classes to color table rows or individual cells. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Dark Table
You can also invert the colors—with light text on dark backgrounds—with .table-dark. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| 3 | Lilli | Kirsh | @lilli |
| 4 | Else | Voigt | @voigt |
| 5 | Ursel | Harms | @ursel |
| 6 | Anke | Sauter | @Anke |
Table head options
Similar to tables and dark tables, use the modifier classes .thead-dark or .thead-light to make <thead>s appear light or dark gray. Read bootstrap documentation for more details.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Lucia | Christ | @Lucia |
| 2 | Catrin | Seidl | @catrin |
Recent Orders
| Order ID | Product Name | Units | Order Date | Order Cost | Status | |
|---|---|---|---|---|---|---|
| 24541 | Coach Swagger | 1 Unit | Oct 20, 2018 | $230 | Completed | |
| 24541 | Toddler Shoes, Gucci Watch | 2 Units | Nov 15, 2018 | $550 | Delayed | |
| 24541 | Hat Black Suits | 1 Unit | Nov 18, 2018 | $325 | On Hold | |
| 24541 | Backpack Gents, Swimming Cap Slin | 5 Units | Dec 13, 2018 | $200 | Completed | |
| 24541 | Speed 500 Ignite | 1 Unit | Dec 23, 2018 | $150 | Cancelled |