Tables

Tables look great in bootstrap with a lot of classes that can help you customize their look.

Table & Contextual

• Basic

table

• Contextual

• table-{TYP}

  • TYP: primary secondary success danger warning info light dark

Try it

There is a basic table class which modifies the way all tables look by adding bold headers with lines underneath. There are also contextual color classes, which can make an entire table show a color.

Table Rows & Cells

table-active

• Contextual

• table-{TYP}

  • TYP: primary secondary success danger warning info light dark

Try it

Inside table cells or rows, you can use an additional class called table active. That will give you a slightly darker color to highlight a cell.

You can also use the contextual table classes to specify a color there.

Style Modifiers

• table-{TYP}
  • TYP: striped hover sm

Try it

There's a few styles that you can add to tables to modify their looks.

The first is striped, which highlights every other cell in your list.

The second is hover, which changes the style when users hover over one of the rows.

Then there is a small version of the table that you can use to give tables a bit less padding.

Borders

table-bordered table-borderless

• Contextual

• border-{TYP}

  • TYP: primary secondary success danger warning info light dark

Try it

Borders deserve a separate mention since there are many options. You can add a border around the cells using the table-bordered class. There is also an option that will remove all borders called table-borderless.

There's also a set of classes you can use with table border that will let you control the color of the borders.

Responsive Tables

• table-responsive{-TYP}
  • TYP: sm md lg xl xxl

Try it

You can ask your tables to be responsive. To get this working you have to wrap a table with a container that has a class of table responsive. The regular class will always be responsive at any width and you can add responsive options that control when the table switches to a responsive layout.

So, for example, table-responsive-md will only be responsive when the table is smaller than the medium breakpoint. In the example, you'll notice I also added a text-nowrap class so that the content doesn't wrap.

Vertical Alignment

• align-{TYP}
  • TYP: baseline top middle bottom text-top text-bottom

Try it

The same vertical alignment classes we can assign to text apply to table cells. They're not as useful as they used to be and nowadays we align mostly with flexbox and grid.

baseline - aligns the baseline of the current element with it's parent.

top - aligns the top padding edge of the cell with the top of the row.

middle - centers the padding box of the cell within the existing row.

bottom - aligns the bottom padding edge of the cell with the bottom of the row.

text-top - aligns the top with the top of the parent's font.

text-top - aligns the bottom with the bottom of the parent's font.