COMPONENTS

Table [ Bootstrap ]

Table gives the ability to display data in tabular format

Basic table

Default
use class table inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Hover Table
use class table-hover inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped Table
use class table-striped inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Dark Table
use class table-dark inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual Classes
For Make row Contextual add Contextual class like .table-success in tr tag and For cell add Contextual class in td or th tag .
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry the Bird @twitter
5 Larry the Bird @twitter
6 Larry the Bird @twitter
7 Larry the Bird @twitter
8 Larry the Bird @twitter
9 Larry the Bird @twitter
Background Utilities
Regular table background variants are not available with the inverse table, however, you may use text or background utilities to achieve similar styles.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Larry the Bird @twitter
5 Larry the Bird @twitter
6 Larry the Bird @twitter
7 Larry the Bird @twitter
8 Larry the Bird @twitter
9 Larry the Bird @twitter

Bootstrap Table Sizes

Extra Large Table
use class table-xl inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Large Table
use class table-lg inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Default Table
use class table-de inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Small Table
use class table-sm inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Extra Small Table
use class table-xs inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bootstrap Border Sizes

Both Borders
use class table-bordered inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Borderless Table
use class table-borderless inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Default Table Border
This is default table style
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Border Bottom Color
use class border-bottom-danger inside <tr> element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bootstrap Styling Sizes

Default Styling
This is default table style
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table Footer Styling
use class table-info inside tfoot element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
# Larry the Bird @twitter
Custom Table Color
use class table-* inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Mark Thornton @facebook
Custom Table Color with Hover and Stripped
use class table-* inside table element
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter