Bootstrap Responsive Table for Data Listing

The HTML tables are the most used element in the web application. Basically, the HTML table is used to present the data in row and columns on the web page. It most preferable to make tables responsive for better user experience. If your web application uses Bootstrap, you can easily build a table design within a minute. Also, you can make Bootstrap table responsive by adding a single class.

In this tutorial, we will show you how to create a responsive table with Bootstrap. Using Bootstrap you can improve the appearance of the HTML table in an easy way. The Bootstrap responsive table is the perfect choice for data listing.

The following different types of table examples helps you to create horizontal tables with basic styling using Bootstrap.

The Bootstrap and jQuery library need to be included to use Bootstrap framework.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Basic Bootstrap Responsive Table

Use table class to add basic style to the HTML table. The table-responsive class makes table responsive.

<table class="table table-responsive">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>Thomas</td>
            <td>smith@example.com</td>
        </tr>
        <tr>
            <td>Merry</td>
            <td>Jim</td>
            <td>merry@example.com</td>
        </tr>
    </tbody>
</table>

Striped Bootstrap Responsive Table

Use table-striped class to add stripes to the HTML table.

<table class="table table-responsive table-striped">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>Thomas</td>
            <td>smith@example.com</td>
        </tr>
        <tr>
            <td>Merry</td>
            <td>Jim</td>
            <td>merry@example.com</td>
        </tr>
    </tbody>
</table>

Hover Bootstrap Responsive Table

Use table-hover class to add a hover effect to the HTML table rows.

<table class="table table-responsive table-hover">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>Thomas</td>
            <td>smith@example.com</td>
        </tr>
        <tr>
            <td>Merry</td>
            <td>Jim</td>
            <td>merry@example.com</td>
        </tr>
    </tbody>
</table>

Bordered Bootstrap Responsive Table

Use table-bordered class to add borders to the HTML table.

<table class="table table-responsive table-bordered">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>Thomas</td>
            <td>smith@example.com</td>
        </tr>
        <tr>
            <td>Merry</td>
            <td>Jim</td>
            <td>merry@example.com</td>
        </tr>
    </tbody>
</table>