Table Basic
2
User Image

Alexander Pierce

Online

Typography

  1. Home
  2. Typography
Basic Table
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Dark Table
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Table head options
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Striped rows
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Striped Dark
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Bordered table
# First Name Last Name Username
1 John Doe @mdo
2 John Doe @TwBootstrap
3 Tnisha Happy @fat
4 Tasi the Bird @twitter
Border Dark Table
# First Name Last Name Username
1 John Doe @mdo
2 John Doe @TwBootstrap
3 Tnisha Happy @fat
4 Tasi the Bird @twitter
Hoverable rows
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Hoverable Dark row
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Small Table
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Small Dark Table
# First Name Last Name Username
1 John Doe @mdo
2 Tnisha Happy @fat
3 Tasi the Bird @twitter
Contextual classes
Type 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
Dark Contextual classes
# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content
Responsive Table
# Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell


# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
Breakpoint specific

Use .table-responsive{-sm|-md|-lg|-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.

# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell
# Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell