Table

  2. Tables
  3. Table
Basic example
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Inverse table
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Table head options
Use one of two modifier classes to make <thead>s appear light or dark gray.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped rows
Use .table-striped to add zebra-striping to any table row within the <tbody>.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered table
Add .table-bordered for borders on all sides of the table and cells.
# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter
Hoverable rows
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Small table
Add .table-sm to make tables more compact by cutting cell padding in half.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
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
Table head options
Similar to tables and dark tables, use the modifier classes .table-light or .table-dark to make <thead>s appear light or dark gray.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual classes with Background color
You can also invert the colors—with light text on dark backgrounds—with .table-dark.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Borderless table
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Borderless Inverse table
Your awesome text goes here.Your awesome text goes here.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter