Bootstrap Tables

Introduction

In our previous blog, we covered Bootstrap Grid Basic and Typography, which are essential for structuring and styling web pages effectively. Now, we move on to another essential aspect of Bootstrap – Tables, Images, and Jumbotron. Bootstrap provides built-in classes for creating responsive tables and images with minimal effort, making it easier for developers to display data and images beautifully across different screen sizes. Additionally, Jumbotron and Page Headers allow us to create eye-catching sections on web pages.

In this blog, we will explore Bootstrap tables, images, Jumbotron, and Page Headers, their features, and how to use them effectively. By the end of this blog, you will be able to create beautifully styled tables, images, and headers in your projects.

Bootstrap Tables

Tables are used to display data in an organized manner. Bootstrap provides various table classes to enhance their appearance and functionality.

1. Bootstrap Basic Table

A basic Bootstrap table is created using the <table> element with the class table.

For example:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Mary</td>
      <td>22</td>
      <td>India</td>
    </tr>
  </tbody>
</table>

Output:

Note: The .table class is required to apply Bootstrap styling to tables.

2. Striped Rows

Adding table-striped class will create alternate shaded rows for better readability.

<table class="table table-striped">

3. Bordered Table

Adding a table-bordered class will create borders around the table and its cells.

For example:

<table class="table table-bordered">

Output:

4. Hover Rows

Using table-hover class highlights a row when the mouse hovers over it.

<table class="table table-hover">

5. Condensed Table

To reduce the table’s padding and make it more compact, use table-sm.

For example:

<table class="table table-sm">

Note: Useful when displaying tables on smaller screens where space is limited.

6. Contextual Classes

Bootstrap provides contextual classes for row or column styling. You can use contextual classes to color table cells (<td>) or table rows (<tr>):

table-primary (Blue)
table-success (Green)
table-danger (Red)
table-warning (Yellow)
table-info (Cyan)

Example:

<tr class="table-success">

Output:

The contextual classes that can be used are:

Class	Description
.active	applies the table row or table cell’s hover color.
.success	shows a successful or positive action.
.info	shows a change or action that is neutrally informative.
.warning	shows a warning that may require attention.
.danger	shows a dangerous or negative action.

Note: Contextual classes make it easier to visually differentiate data categories.

7. Responsive Tables

To make tables responsive, wrap them inside a <div> with the class table-responsive.

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Note: Responsive tables automatically enable horizontal scrolling on small screens (under 768px). When viewing on anything larger than 768px wide, there is no difference.

Request more information

Bootstrap Tables