Bootstrap Tables

  1. Home
  2. Tables
  3. Basic Tables

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

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

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

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

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 chameleon 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 chameleon 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

Table head options with primary background

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

# 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
Navbar Color Options
Layout Options
Sidebar menu Background
Sidebar Background Image
background image
background image
background image
background image
More Themes
Try Layout Builder