Bootstrap Tables

Aditya kumar
Last Updated: May 13, 2022

Introduction

Bootstrap provides classes that may be used to style tables in various. These ways include modifying the header design, stripping rows, adding or removing borders, and making rows hoverable. Tables can easily be made responsive using Bootstrap's classes.

Source: Bootstrap Tables

For creating tables, Bootstrap provides a tidy layout. The following are some of the table components that Bootstrap supports:

Sr.No.

Tag & Description

1

<table>

Data in a tabular format is shown using this wrapper element.

2

<thead>

To label table columns, a container element for table header rows (<tr>) is used.

3

<tbody>

In the table's body, there is a container element for table rows (<tr>).

4

<tr>

On a single row, a container element for a set of table cells (<td> or <th>).

5

<td>

This is the default table cell.

6

<th>

Labels for columns (or rows, depending on scope and location) are stored in a special table cell. It has to be used within a <thead> tag.

7

<caption>

The table's contents are described or summarised in this section.

 

How to start with Bootstrap tables?

For CSS

To load CSS, copy and paste the stylesheet <link> into your <head> before any other stylesheets.

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css"></link>

 

For JS

To activate them, place the following <script>s near the end of your pages, just before the closing </body> tag. jQuery must be installed first, followed by Bootstrap.js and JavaScript plugins.

<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>

 

Template for a start

Make sure your pages are up to date in design and development. For correct responsive behaviours, use an HTML5 doctype and include a viewport meta tag.

We utilise Font Awesome as the default icons in Bootstrap v4, thus we'll need to import the Font Awesome link.

When you've finished, your pages should look like this:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
  </head>
  <body>
    <table data-toggle="table">
      <thead>
        <tr>
          <th>Item ID</th>
          <th>Item Name</th>
          <th>Item Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Item 1</td>
          <td>$1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Item 2</td>
          <td>$2</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
  </body>
</html>

 

HTML5 Doctype

The HTML5 doctype is required for Bootstrap Table. You'll see some weird incomplete styling without it, but including it shouldn't create any major issues.

<!doctype html>
<html lang="en">
  ...
</html>

 

Basic Table

Add the base class of .table to any table for a lovely, basic table style with just some light padding and horizontal dividers, as demonstrated in the following example:

Example:

<!-- Bootstrap table class -->
  <table class="table">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

Dark Table

Use the classes table-dark and table within the <table> element to make the table appear with a dark background and light font, as shown below.

Example:

<!-- table, table-dark -->
  <table class="table table-dark">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

 

 

Stripped Rows

Use the classes table and table-stripped together in the <table> tag to make the table appear in alternate dark and light rows. By combining the classes table, table-dark, and table-stripped within the <table> tag, we can make the dark table appear in alternate bright and dark rows. For an illustration, see the example below.

Example:

<!-- table, table-stripped -->
  <table class="table table-stripped">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

  <!-- table, table-stripped, table-dark -->
  <table class="table table-stripped table-dark">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

 

Bordered Table

Use the classes table-bordered and table within the <table> tag to create the table and each cell enclosed by borders. By combining the classes table, table-dark, and table-bordered within the <table> tag, we can create a dark table with each cell enclosed by borders. For an illustration, see the example below.

Example:

<!-- table, table-bordered -->
  <table class="table table-bordered">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

  <!-- table, table-bordered, table-dark -->
  <table class="table table-bordered table-dark">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

 

Hoverable Table

Within the <table> tag, utilise the classes table-hover and table to make the table's rows hoverable. The <table> tag can be used to make the rows of a dark table hoverable by combining the classes table, table-hover, and table-dark. For an illustration, see the example below.

Example:

!-- table, table-hover -->
  <table class="table table-hover">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

  <!-- table, table-hover, table-dark -->
  <table class="table table-hover table-dark">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr>
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

Colored Table

We may utilise a number of contextual classes provided by Bootstrap to colour an entire row or a single table cell. For a better appearance, these classes should be used with the light table rather than the dark table. We can utilise Bootstrap's background colour classes to tint dark tables. The contextual classes are listed in the table below. For clarification, see the example:

table-primarytable-secondarytable-success
table-dangertable-warningtable-info
table-lighttable-darktable-active

 

<!-- table, table-primary, table-warning, table-danger -->
  <table class="table">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr class="table-primary">
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr class="table-warning">
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

  <!-- table, bg-danger, bg-primary, table-dark -->
  <table class="table table-dark">
    <thead>
    <tr>
      <th scope="col">S. No.</td>
      <th scope="col">Name</td>
      <th scope="col">City</td>
      <th scope="col">Age</td>
    </tr>
    </thead>
    <tbody>
    <tr class="bg-danger">
      <th scope="row">1</td>
      <td>Ajay</td>
      <td>Patna</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">2</td>
      <td>Rahul</td>
      <td>Chandigarh</td>
      <td>17</td>
    </tr>
    <tr class="bg-primary">
      <th scope="row">3</td>
      <td>Parush</td>
      <td>Kolkata</td>
      <td>22</td>
    </tr>
    </tbody>
  </table>

 

Responsive Table

Wrap the table between an opening and closing div> tag with the class table-responsive within the opening div> element to make it responsive to all viewport sizes. Similarly, we use the class table-responsive-sm|-md|-lg|-xl to make the table responsive based on the viewport size we want it to be responsive to.

If the table does not fit within the viewport's current size, a horizontal scroll bar will display in responsive tables.

If the viewport size is less than the viewport size defined by the class table-responsive{-sm|-md|-lg|-xl}, a viewport, the specific responsive table will become responsive. For instance, see the samples below.

Example: table-responsive

<!-- table -->
    <table class="table">
    <thead>
      <tr>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      <th scope="col">Head</td>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      </tr>
      <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      </tr>
      <tr>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      <td>Data</td>
      </tr>
    </tbody>
    </table>

 

Frequently Asked Questions

1. Discuss the Bootstrap table and the many classes that may be used to alter the table's design.

Horizontal divisions and light padding are included in a basic Bootstrap 4 table.

  • The .table class adds some basic styling to a table.
  • The table-stripped class gives the table zebra stripes.
  • The .table-bordered class adds all-around borders to the table and cells.
  • The .table-hover class provides a hover effect to table rows (grey background color).
     

The zebra-striped table looks like this:

 

2. The table header does not adjust automatically when the window is resized; how can this be fixed?

The fixed header feature is automatically activated when you change the height of the bootstrap table, which is what causes the problem. To address the problem, you must listen to the window's resize event and use the resetView method, as shown below.

$(function () {
  $('#tableId').bootstrapTable() // init via javascript

  $(window).resize(function () {
    $('#tableId').bootstrapTable('resetView')
  })
})

 

3. What are table contextual classes in Bootstrap?

ClassDescription

.active

The hover color is applied to a particular row or cell.

.success

This represents a successful or beneficial deed.

.warning

Determines if there is a warning that requires attention.

.danger

It determines the harmful actions.

 

Key Takeaways

In this article, we have discussed bootstrap tables and how important they are for designing a website or web page? Bootstrap tables consist of different tables like hoverable tables, basic or simple tables, bordered tables and many more. We have discussed how these different types of tables are being used. Bootstrap tables are the most important topic to make any website or web page.

 

If you want to get started with bootstrap for free and want to learn more about it then you can visit Learn Bootstrap and check out our blog to know why bootstrap is cool and how it helps you in designing your website with Responsive Network Vanilla utilising HTML, CSS & Bootstrap.

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think