A Walkthrough of the Bootstrap CSS Table Element

The way you organize content on your website is important.

There’s a range of design strategies you can implement to make your content more readable. You can use images to break up large chunks of text. You can use typography, changing the font-size or spacing between words or otherwise arranging text on the page. You can also use tables.

Tables can be effective for organizing and presenting content in a way that’s easy for readers to scan and to absorb large amounts of data quickly.

Across the HubSpot blogs, you’ll sometimes see tables that summarize the key takeaways of blog posts. Check out the table at the end of this Wix vs. WordPress post, for example.

While this table was built in the HubSpot CMS, you can also create tables with HTML and CSS .

In this post, we’ll walk through how to create and style a table element in Bootstrap CSS so you can add tables to blogs and pages on your site. Let’s get started.

Bootstrap Table CSS

Creating a table in Bootstrap is easy. Simply add the class .table to any <table> element in the body section of your index.html file. 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. You want it to have four columns and three rows so that it looks something like this:

Source

To create this Bootstrap table, you’d use the following HTML:

 

 
   <table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

Notice that this snippet can be broken down into two major parts: the <thead> and <tbody> sections (ie. the table head and table body sections). The four columns are defined in the <thead> section while the three rows are in the <tbody> section. Each of these sections are then 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 look at how in the examples below.

Bootstrap Table CSS Examples

Below are some examples that demonstrate how you can use and extend the table element in Bootstrap. Each example will show the different modifier classes needed.

I’ll be using the W3Schools Online Code Editor to create the examples so you can click any of the Source links to view the full code snippet behind the example.

Responsive Bootstrap Table

Bootstrap being mobile-first is one of the most compelling reasons to use this framework to build your site rather than building it from scratch. It makes the process for creating responsive elements, including tables, much simpler.

To create tables that are responsive across all viewports (meaning, they can be scrolled horizontally with ease), you just need to wrap the .table class with the .table-responsive class. That means, rather than add the “table-responsive” after the .table class, you need to place the whole table element in a <div> element that’s modified by the .table-responsive class. See the effect below.

Source

To create the responsive table above, use the following code. (You might notice that I’ve added in some dummy rows and columns to show the effect of the .table-responsive class more clearly.)

 

 
   <div class="table-responsive">
  <table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
      <th scope="col">-</th>
      <th scope="col">-</th>
      <th scope="col">-</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
      <td>N/A</td>
      <td>N/A</td>
      <td>N/A</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
      <td>N/A</td>
      <td>N/A</td>
      <td>N/A</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
      <td>N/A</td>
      <td>N/A</td>
      <td>N/A</td>
    </tr>
  </tbody>
</table>
</div>
 

You can also make tables responsive to different viewports, rather than all, 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. In that case, 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 something like this:

Source

To create this table, simply add “table-dark" after the .table class. You can see this addition in the first line of code, which is the only difference between this markup and the basic table markup.

 

 
   <table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>

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, then you can use the modifier classes .thead-dark or .thead-light. .Thead-dark will make it dark gray (as shown in the example below) while .thead-light will make it light gray.

Source

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:

 

 
    <table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>
 

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, as shown below.

Source

To create this table, simply add “table-striped" after the .table class. This is virtually the same process for creating a dark table. Here’s the code:

 

 
    <table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>
 

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. You can see the effect in the demo below.

Source

To create this table, simply add “table-hover" after the .table class. This is virtually the same process for creating a dark or striped table. Here’s the code:

 

 
    <table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>
 

Bootstrap Table with Colored Rows

With Bootstrap, you can also change the color of rows or cells using contextual classes. To do, 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:

Source

Here’s the code to create this multi-colored table.

 

 
    <table class="table">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr class="table-success">
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>
 

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.

Source

To create this table, simply add “table-bordered" after the .table class. This is virtually the same process for creating a dark table, striped table, or table with hoverable rows. Here’s the code:

 

 
    <table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">No.</th>
      <th scope="col">Name</th>
      <th scope="col">Symbol</th>
      <th scope="col">Atomic Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Hydrogen</td>
      <td>H</td>
      <td>1.008</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Helium</td>
      <td>He</td>
      <td>4.003</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Lithium</td>
      <td>Li</td>
      <td>6.941</td>
    </tr>
  </tbody>
</table>
 

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

Adding Tables to Your Bootstrap 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.