Bootstrap Tables And Table Variants Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 7 mins read Difficulty-Level: beginner

Understanding the Core Concepts of Bootstrap Tables and Table Variants

Bootstrap Tables and Table Variants: Detailed Explanation and Important Information

Basic Bootstrap Tables

Bootstrap provides a default, simple style for tables with minimal styling. To create a basic Bootstrap table, you need to add the class .table to your <table> element.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Table Variants

Bootstrap offers several variants to add different visual styles and functionalities to your tables:

.table-striped: Adds zebra-striping to the table rows (every odd row gets a different background color).

<table class="table table-striped">
  <!-- Table Content Here -->
</table>

.table-bordered: Adds borders around the table and its cells for a more structured look.

<table class="table table-bordered">
  <!-- Table Content Here -->
</table>

.table-hover: Highlights a table row when your mouse hovers over it, making it easier to see which row is currently under the cursor.

<table class="table table-hover">
  <!-- Table Content Here -->
</table>

.table-dark: Applies dark styling to the entire table, including borders and text.

<table class="table table-dark">
  <!-- Table Content Here -->
</table>

.table-sm: Condenses the table's height, making the text smaller. This is useful when you have a large table or limited space.

<table class="table table-sm">
  <!-- Table Content Here -->
</table>

.table-active, .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark: These classes can be used on <tr> or <td> elements to color-code individual rows or cells.

<table class="table">
  <tbody>
    <tr class="table-active">...</tr>
    <tr class="table-primary">...</tr>
    <tr class="table-secondary">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-danger">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-light">...</tr>
    <tr class="table-dark">...</tr>
  </tbody>
</table>

Responsive Tables

To make tables responsive, simply add the .table-responsive class to a parent <div> around the <table>. This makes the table scroll horizontally on smaller devices, improving the readability of wide tables.

<div class="table-responsive">
  <table class="table">
    <!-- Table Content Here -->
  </table>
</div>

Important Information

Accessibility: Use <th> for header cells with an appropriate scope attribute, and always pair tables with captions or summaries for accessibility.
Combining Variants: You can combine multiple table classes to achieve the desired look for your table. For example, .table-striped.table-bordered will give you a striped table with borders.
Customization: If none of the provided variants meet your needs, Bootstrap allows for extensive customization using CSS or SASS variables.

By understanding and utilizing these Bootstrap table styles and variants, you can enhance the presentation of your data, making it more accessible and visually appealing to users.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Bootstrap Tables and Table Variants

Step 1: Set Up Your Environment

First, you need to include Bootstrap in your project. You can add Bootstrap via CDN (Content Delivery Network) easily. Here's how:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Tables and Variants</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Your content will go here -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 2: Create a Basic Table

Here's a simple example of a Bootstrap table:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Tables and Variants</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>Basic Bootstrap Table</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>Serial No.</th>
                    <th>Name</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane Doe</td>
                    <td>jane.doe@example.com</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Mike Smith</td>
                    <td>mike.smith@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Step 3: Add Striped Table

Bootstrap provides a .table-striped class to add alternating row colors:

<div class="container mt-5">
    <h2>Striped Bootstrap Table</h2>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Serial No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>john.doe@example.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Doe</td>
                <td>jane.doe@example.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Mike Smith</td>
                <td>mike.smith@example.com</td>
            </tr>
        </tbody>
    </table>
</div>

Step 4: Add Bordered Table

Use .table-bordered to add borders to the table and its cells:

<div class="container mt-5">
    <h2>Bordered Bootstrap Table</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Serial No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>john.doe@example.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Doe</td>
                <td>jane.doe@example.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Mike Smith</td>
                <td>mike.smith@example.com</td>
            </tr>
        </tbody>
    </table>
</div>

Step 5: Add Hoverable Table

Add .table-hover to enable a hover state on table rows:

<div class="container mt-5">
    <h2>Hoverable Bootstrap Table</h2>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Serial No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>John Doe</td>
                <td>john.doe@example.com</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Doe</td>
                <td>jane.doe@example.com</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Mike Smith</td>
                <td>mike.smith@example.com</td>
            </tr>
        </tbody>
    </table>
</div>

Step 6: Add Responsive Table

Use the .table-responsive class to make the table scroll horizontally on smaller screens:

<div class="container mt-5">
    <h2>Responsive Bootstrap Table</h2>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Serial No.</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Phone Number</th>
                    <th>Address</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>John Doe</td>
                    <td>john.doe@example.com</td>
                    <td>123-456-7890</td>
                    <td>1234 Elm Street, Anytown, USA</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jane Doe</td>
                    <td>jane.doe@example.com</td>
                    <td>098-765-4321</td>
                    <td>5678 Maple Avenue, Othertown, USA</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Mike Smith</td>
                    <td>mike.smith@example.com</td>
                    <td>111-222-3333</td>
                    <td>9876 Oak Lane, Anycity, USA</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Step 7: Add Contextual Classes

Bootstrap provides contextual classes to color your table rows:

<div class="container mt-5">
    <h2>Contextual Classes Bootstrap Table</h2>
    <table class="table">
        <thead>
            <tr>
                <th>Serial No.</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr class="table-primary">
                <td>1</td>
                <td>John Doe</td>
                <td>john.doe@example.com</td>
            </tr>
            <tr class="table-secondary">
                <td>2</td>
                <td>Jane Doe</td>
                <td>jane.doe@example.com</td>
            </tr>
            <tr class="table-success">
                <td>3</td>
                <td>Mike Smith</td>
                <td>mike.smith@example.com</td>
            </tr>
            <tr class="table-danger">
                <td>4</td>
                <td>Jessica Brown</td>
                <td>jessica.brown@example.com</td>
            </tr>
            <tr class="table-warning">
                <td>5</td>
                <td>David Wilson</td>
                <td>david.wilson@example.com</td>
            </tr>
            <tr class="table-info">
                <td>6</td>
                <td>Rachel Green</td>
                <td>rachel.green@example.com</td>
            </tr>
            <tr class="table-light">
                <td>7</td>
                <td>Monica Geller</td>
                <td>monica.geller@example.com</td>
            </tr>
            <tr class="table-dark">
                <td>8</td>
                <td>Chandler Bing</td>
                <td>chandler.bing@example.com</td>
            </tr>
        </tbody>
    </table>
</div>

Final Step: Combine All Table Variants

You can combine several of these styles to create a highly customized table:

Top 10 Interview Questions & Answers on Bootstrap Tables and Table Variants

1. What is a Bootstrap Table?

Answer: A Bootstrap table is a styling component provided by the Bootstrap framework to enhance the appearance and functionality of standard HTML tables. By using Bootstrap classes, you can quickly style your tables to make them responsive and visually appealing without having to write extensive CSS code.

2. How do I make a table responsive in Bootstrap?

Answer: To make a table responsive in Bootstrap, wrap it with a

element that has the class table-responsive. This will ensure that the table content will scroll horizontally on smaller screens.

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

3. Can Bootstrap tables be styled with striped, bordered, or hover effects?

Answer: Yes, Bootstrap provides several classes to style tables:

.table-striped: Applies a zebra-striped pattern to table rows.
.table-bordered: Adds borders around the table and cells.
.table-hover: Highlights a row when hovered over with the mouse cursor. Here’s an example of all three:

<table class="table table-striped table-bordered table-hover">
    ...
</table>

4. What are the different types of Bootstrap table color schemes?

Answer: Bootstrap offers color variants for table rows with the following classes:

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

You can apply these to table rows (e.g., <tr>) or individual cells (<td>). Example:

<tr class="table-success">
    <td>Success Text</td>
    <td>More Success Text</td>
</tr>

5. Is it possible to have contextual table headers or footer in Bootstrap?

Answer: Yes, Bootstrap allows adding context to the header and footer rows using the same color scheme classes as on regular rows. Simply use classes like .thead-primary, .thead-success, etc., for headers, and .tfoot-primary, .tfoot-success, etc., for footers.

<thead class="thead-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">Header</th>
        <th scope="col">Another Header</th>
    </tr>
</thead>
<tfoot class="tfoot-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">Footer</th>
        <th scope="col">Another Footer</th>
    </tr>
</tfoot>

6. How do I create a caption for a Bootstrap table?

Answer: You can add a caption to a Bootstrap table by using the <caption> tag inside your table structure. The caption should be placed immediately after the <table> element.

<table class="table">
    <caption>List of users</caption>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Username</th>
            <th scope="col">Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>mark@example.com</td>
        </tr>
        <!-- More rows -->
    </tbody>
</table>

7. Can Bootstrap tables include active or disabled rows?

Answer: Yes, Bootstrap allows marking a table row as active or disabled using the .table-active and .table-disabled classes respectively.

<tr class="table-active">
    <td>This row is active</td>
    <td>More data here</td>
</tr>
<tr class="table-disabled">
    <td>This row is disabled</td>
    <td>No interaction possible</td>
</tr>

8. How can I customize the appearance of Bootstrap tables beyond the built-in variants?

Answer: While Bootstrap provides a lot of utility classes, you can further customize the appearance of tables using custom CSS. You can target Bootstrap classes directly, or add new custom classes. Example in CSS:

.table-custom {
    font-size: 18px;
    color: #343a40;
}
.table-custom th,
.table-custom td {
    border-color: #28a745;
}

And then applying it to a table in HTML:

<table class="table table-custom">
    ...
</table>

9. Can I sort or paginate Bootstrap tables easily?

Answer: Bootstrap itself does not provide built-in sorting or pagination capabilities. However, you can integrate these functionalities using external plugins like DataTables. To enable sorting and pagination with DataTables, follow these steps:

Include DataTables CSS and JS in your project.
Initialize DataTable jQuery plugin on the Bootstrap table.

Example:

<!-- DataTables CSS and JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<table id="example" class="table">
    ...
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable();
});
</script>

10. Are there any best practices to follow while using Bootstrap tables?

Answer: Yes, consider the following best practices:

Always use semantic tags such as <thead>, <tbody>, and <tfoot> to structure your tables better.
Leverage responsive design techniques to ensure your tables look good on all devices. Wrap tables with .table-responsive.
Use appropriate context color classes to differentiate between statuses or importance levels within the table.
For large datasets, consider integrating JavaScript plugins like DataTables to provide filtering, sorting, and pagination out-of-the-box.
Ensure accessibility compliance by properly labeling table rows and columns, using scope attributes, and ensuring sufficient color contrast.