A Walkthrough of the Bootstrap CSS Table Element [+ 7 Examples]

There are several design approaches you can take to make your content more readable. You can use images and/or whitespace to break up large chunks of text, and you can change the font-size or spacing between words. You can also use tables.

Tables are effective for organizing and presenting content in a way that’s easy for readers to scan and to absorb large amounts of data quickly. However, without using a mobile-first framework, it's hard to get these tables to look good on mobile devices.

Iin this post, we’ll walk through how to create and style a simple table element in the CSS framework Bootstrap, so you can add responsive tables to pages and blog posts on your website. Let’s get started.

Bootstrap Table CSS

Like many things in Bootstrap, creating a table is easy. Simply add the class.table to any <table> element in your HTML. You can then customize the table using modifier classes or custom styles.

Before we talk about customization, let’s start with the most basic table markup. Let’s say you want to create a table listing some periodic elements, with four columns and three rows.

To create this with Bootstrap, use the HTML in the example below:

See the Pen Bootstrap table - 1 by HubSpot (@hubspot) on CodePen.

Notice that this code can be broken down into two major parts: <thead> (table head) and <tbody> (table body). The four columns are defined in the <thead> section while the three rows are in the <tbody> section. Both of these sections are wrapped in the parent <table> element.

You can customize the table by adding modifier classes or custom styles to the parent or child elements. We’ll see how in the examples below.

Bootstrap Table CSS Examples

Below are some examples that demonstrate how you can use and extend the table element with Bootstrap. Each example will show the different modifier classes needed. Click any of the links below to jump to the example.

• responsive Bootstrap table
• dark Bootstrap table
• Bootstrap table with colored head
• Bootstrap table with striped rows
• Bootstrap table with hoverable rows
• bootstrap table with colored rows
• bordered Bootstrap table

Responsive Bootstrap Table

Bootstrap's mobile-first approach to design makes creating responsive elements, including tables, much simpler.

To create tables that are responsive across all viewports (meaning, they can be scaled horizontally), you just need to wrap the .table class with the .table-responsive class. Place the entire <table> element inside a <div> element, and add the .table-responsive class to the <div>. See an example below.

See the Pen Bootstrap table - 2 by HubSpot (@hubspot) on CodePen.

You can also make tables responsive to different specific viewports, rather than all viewports, by picking a maximum breakpoint at which your table can scroll horizontally.

For example, if you’d like your table to scroll horizontally up to 576px, then you’d use the .table-responsive-sm modifier class. 768px, 992px, and 1120px are the respective max-width breakpoints for .table-responsive{-md|-lg|-xl}.

Dark Bootstrap Table

The default color of the Bootstrap table class might not match your branding or color scheme. You can use the .table-dark modifier class to invert the colors so that the background color is dark while the text is light. It will look like this:

See the Pen Bootstrap table - 3 by HubSpot (@hubspot) on CodePen.

Bootstrap Table with Colored Head

If you’d like to only change the color of the head of the table and leave the body as is, use the modifier classes .thead-dark or .thead-light. .thead-dark will make the head of the table dark gray (as shown in the example below) while .thead-light will make it light gray.

Whereas in the previous example you applied the modifier class to the <table> element, you’ll apply one of these classes to the <thead>s. You can see this change in the second line of the code below:

See the Pen Bootstrap table - 4 by HubSpot (@hubspot) on CodePen.

Bootstrap Table with Striped Rows

Let’s say you want to change the style of the table body section, not the head section. Using the .table-striped modifier class, you can add color to every other row within the <tbody> section. This will give it a “zebra-striping” effect.

To create this table, simply add “table-striped" after the .table class.

See the Pen Bootstrap table - 5 by HubSpot (@hubspot) on CodePen.

Bootstrap Table with Hoverable Rows

Now let’s say you’d like the style of the rows to change only when a visitor hovers over them. Using the .table-hover modifier class, you can enable a hover state on table rows within a <tbody> section.

To create this table, add table-hover after the .table class.

See the Pen Bootstrap table - 5 by HubSpot (@hubspot) on CodePen.

Bootstrap Table with Colored Rows

With Bootstrap, you can also change the color of rows or cells using contextual classes. You can apply the following classes to <tr> elements (rows) or <td> elements (individual cells):

• table-primary
• table-secondary
• table-success
• table-danger
• table-warning
• table-info
• table-light
• table-dark

I can apply any of the above classes to different rows to make my table look something like this:

See the Pen Bootstrap table - 6 by HubSpot (@hubspot) on CodePen.

Bordered Bootstrap Table

If you’d like to have borders on all sides of the table rather than just the horizontal dividers, then you can use the .table-bordered modifier class. Add this class after the .table class.

See the Pen Bootstrap table - 7 by HubSpot (@hubspot) on CodePen.

If you’d like to remove all borders, then you can use the .table-borderless modifier class.

Adding Bootstrap Tables to Your Site

Tables can help organize large amounts of data on your site in a way that’s easy to read and digest for your visitors. Any of the table examples described above can be added and customized to your unique Bootstrap site. You’ll just need some familiarity with HTML and CSS to get started.

Editor's note: This post was originally published in February 2021 and has been updated for comprehensiveness.