Data 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

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-light or .thead-dark 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
3 Lilli Kirsh @lilli
4 Else Voigt @voigt
5 Ursel Harms @ursel
6 Anke Sauter @Anke

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