Basic Tables

  1. Home
  2. Tables
  3. Basic Tables
Bootstrap Cards Buttons Extended

Basic Tables

Using the most basic table markup, 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.

Example 1: Table with outer spacing

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Example 2: Minimal Table with no outer spacing.

# 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-inverse.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inverse table with info background

You can also invert the colors—with light text on dark backgrounds—with .bg-info, .bg-success, .bg-warning and .bg-danger classes.

To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal. Refer HTML markup line no 1. Background color class is a optional if you don't it will take white background default.

To set the selected background color lighten use .bg-lighten-[*] class where [*] is the value between '1-5' of your selected lighten color from stack color palette. So for color lighten 4 background class will be .bg-lighten-4. Refer HTML markup line no 1. Background lighten color class is a optional if you don't it will take white background default.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head options

Similar to default and inverse tables, use one of two modifier classes .thead-default or .thead-inverse 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
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table head options with primary background

Use background classes bg-* to make custom thead background. You can also use Stack Admin color palette classes for background.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# 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>. This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows with inverse table

Use .table-inverse 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.

# 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

Bordered striped

Use .table-striped with .table-bordered to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Bordered Table Inverse

Use .table-inverse with .table-bordered to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Jacob Thornton @fat
4 Larry the Bird @twitter

Hoverable rows

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Contextual classes

Use contextual classes to color table rows or individual cells.

Class Description
.table-active Applies the hover color to a particular row or cell
.table-success Indicates a successful or positive action
.table-info Indicates a neutral informative change or action
.table-warning Indicates a warning that might need attention
.table-danger Indicates a dangerous or potentially negative action
# 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
8 Larry the Bird @twitter

Contextual classes inverse

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
8 Larry the Bird @twitter

Captions

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Responsive tables

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}.

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.

Always responsive
# 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