Bootstrap Tables

Bootstrap is a popular front-end framework used for designing responsive and mobile-first websites.

One of its components is the Bootstrap table, which allows you to create tables with basic styling, sorting, pagination, and search features.

In this guide, we will go over the basics of Bootstrap tables and how to implement them in your projects.

Getting Started

To get started with Bootstrap tables, you'll need to include the Bootstrap CSS and JavaScript files in your project.

You can either download the files from the official website or include the links to the CDN in the head section of your HTML file:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Creating a Basic Table

To create a basic Bootstrap table, you need to wrap a <table> element with the .table class:

<table class="table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
        </tr>
    </tbody>
</table>

Table Striped and Bordered

You can enhance the visual appeal of your table by adding stripes and borders with the .table-striped and .table-bordered classes:

<table class="table table-striped table-bordered">
    <!-- thead and tbody -->
</table>

Table Hover Rows

To highlight the rows on hover, add the .table-hover class:

<table class="table table-striped table-bordered table-hover">
    <!-- thead and tbody -->
</table>

Table Contextual Classes

Bootstrap provides several contextual classes to change the background color of table rows:

  • .table-active
  • .table-success
  • .table-info
  • .table-warning
  • .table-danger

For example:

<tr class="table-success">
    <!-- td elements -->
</tr>

Table Responsive

To make your table responsive on smaller screens, wrap the table with a .table-responsive class:

<div class="table-responsive">
    <table class="table">
        <!-- thead and tbody -->
    </table>
</div>

Conclusion

Bootstrap tables provide basic styling, sorting, pagination, and search features that make it easy to create responsive tables in your web projects.

By using the various classes and styles, you can customize the appearance of your table to match the overall look and feel of your website.

Whether you want to create simple, stripped-down tables or tables with more advanced features, Bootstrap provides the tools you need to get the job done.

This guide covers the basics of Bootstrap tables and does not go into more advanced features such as sorting, pagination, and search functionality.

If you need to implement these features in your tables, you can use JavaScript plugins such as DataTables or integrate with a back-end solution.

Bootstrap Basics