Table

Examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Table with outer spacing

Using the most basic table up, here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

NAME RATE SKILL
Michael Right $15/hr UI/UX
Morgan Vanblum $13/hr Graphic concepts
Tiffani Blogz $15/hr Animation
Ashley Boul $15/hr Animation
Mikkey Mice $15/hr Animation

Table without outer spacing

Using the most basic table up, here’s how .table-based tables look in Bootstrap. You can use any example of below table for your table and it can be use with any type of bootstrap tables.

NAME RATE SKILL
Michael Right $15/hr UI/UX
Morgan Vanblum $13/hr Graphic concepts
Tiffani Blogz $15/hr Animation
Ashley Boul $15/hr Animation
Mikkey Mice $15/hr Animation

Inverse table

You can also invert the colors—with light text on dark backgrounds—with .table-dark.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

You can also invert the colors—with dark text on light backgrounds—with .table-light.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

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.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Striped inverse dark

Use .table-dark with .table-striped to add zebra-striping to any inverse table row within the <tbody>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Bordered table

Add .table-bordered for borders on all sides of the table and cells. For Inverse Dark Table, add .table-dark along with .table-bordered.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Borderless Table

Add .table-borderless for a table without borders. It can also be used on dark tables.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Hoverable rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Contextual classes

Use contextual classes to color table rows or individual cells. Read full documnetation here.

NAME RATE SKILL TYPE LOCATION ACTION
Michael Right $15/hr UI/UX Remote Austin,Taxes
Morgan Vanblum $13/hr Graphic concepts Remote Shangai,China
Tiffani Blogz $15/hr Animation Remote Austin,Texas
Ashley Boul $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas
Mikkey Mice $15/hr Animation Remote Austin,Texas

Always responsive

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding .table-responsive class on .table. Or, pick a maximum breakpoint with which to have a responsive table up to by adding .table-responsive{-sm|-md|-lg|-xl}. Read full documnetation here.

Vertical clipping/truncation

Responsive tables make use of overflow-y: hidden, which clips off any content that goes beyond the bottom or top edges of the table. In particular, this can clip off dropdown menus and other third-party widgets.

# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10 Heading 11 Heading 12 Heading 13
Michael Right Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
Michael Right Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell
Michael Right Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell Table cell