Bootstrap Tables

The bootstrap has provided classes to extend the default style of HTML tables. By using bootstrap table classes, we can add the colors to your table rows, table headers, etc. and also we can create striped table rows, border rows, hover rows, etc. based on our requirements.

Bootstrap Standard Table

To change the default style of HTML table, first create a table and add bootstrap .table class to the table (<table>) element. The bootstrap .table class will add basic styling like cell padding (8px) and horizontal dividers to the table.

 

Live Preview

<table class="table">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap basic table example resultWe can also invert the colors of table like light text on dark background by adding .table-dark class in bootstrap.

 

Live Preview

 <table class="table table-dark">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Botstrap dark table example result

Bootstrap Striped Table Rows 

By adding bootstrap .table-striped class to <table> element, we can create a table with alternate background colored rows like zerbra-stripes.

 

Live Preview

<table class="table table-striped">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

    </tbody>

</table>

The .table-striped class will add alternate background color to the table rows within the <tbody> element.

 

The above example will return the result like as shown below.

 

Bootstrap table with striped rows example result

 

Similarly, we can create a dark table with striped rows by adding .table-drak class with .table-striped class like as shown below.

 

Live Preview

<table class="table table-dark table-striped">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

        <tr>

            <td>Peter</td>

            <td>Mark</td>

            <td>Not Available</td>

            <td>Not Available</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap Dark Table with Striped Rows Example Result

Bootstrap Table with Hoverable Rows

In bootstrap, we can add hover effect for the table rows within <tbody> element by adding .table-hover class. The .table-hover class will provide light gray color on hover of the row.

 

Live Preview

<table class="table table-hover">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Suresh</td>

            <td>Dasari</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr>

            <td>Rohini</td>

            <td>Alavala</td>

            <td>8000000</td>

            <td>@rohini</td>

        </tr>

        <tr>

            <td>Trishika</td>

            <td>Dasari</td>

            <td>7000000</td>

            <td>@trishi</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap table with hoverable rows example result

 

Similarly, we can create dark-themed hoverable rows table by adding .table-dark class with .table-hover class like as shown below.

 

Live Preview

<table class="table table-dark table-hover">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Suresh</td>

            <td>Dasari</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr>

            <td>Rohini</td>

            <td>Alavala</td>

            <td>8000000</td>

            <td>@rohini</td>

        </tr>

        <tr>

            <td>Trishika</td>

            <td>Dasari</td>

            <td>7000000</td>

            <td>@trishi</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap dark table with hoverable rows example result

Bootstrap Bordered Table

By using bootstrap .table-bordered class, we can add borders on every row and cell of the table.

 

Live Preview

<table class="table table-bordered">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Suresh</td>

            <td>Dasari</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr>

            <td>Rohini</td>

            <td>Alavala</td>

            <td>8000000</td>

            <td>@rohini</td>

        </tr>

        <tr>

            <td>Trishika</td>

            <td>Dasari</td>

            <td>7000000</td>

            <td>@trishi</td>

        </tr>

    </tbody>

</table>

The .table-bordered class will add borders on all sides of the table and cells. The above example will return the result like as shown below. 

 

Bootstrap bordered table example result

Bootstrap Borderless Table

By adding bootstrap .table-borderless class to <table> element, we can create a table without any borders.

 

Live Preview

<table class="table table-borderless">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Suresh</td>

            <td>Dasari</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr>

            <td>Rohini</td>

            <td>Alavala</td>

            <td>8000000</td>

            <td>@rohini</td>

        </tr>

        <tr>

            <td>Trishika</td>

            <td>Dasari</td>

            <td>7000000</td>

            <td>@trishi</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap border less table example result

Bootstrap Table Header Colors

By adding .thead-light or .thead-dark class to the table header (<thead>), we can change the table header color to light or dark gray based on our requirements.

 

Live Preview

<table class="table table-bordered">

    <thead class="thead-dark">

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Suresh</td>

            <td>Dasari</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr>

            <td>Rohini</td>

            <td>Alavala</td>

            <td>8000000</td>

            <td>@rohini</td>

        </tr>

        <tr>

            <td>Trishika</td>

            <td>Dasari</td>

            <td>7000000</td>

            <td>@trishi</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap table header color example result

 

Same way, if you want light gray color header, apply .thead-light class on table header (<thead>).

Bootstrap Table with Contextual Classes

The bootstrap contextual classes such as success, info, warning, etc. can be used on rows (<tr>) and cells (<td>) of a table (<table>).

 

Live Preview

<table class="table">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Default</td>

            <td>Suresh</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr class="table-primary">

            <td>Primary</td>

            <td>Rohini</td>

            <td>9000000</td>

            <td>@rohini</td>

        </tr>

        <tr class="table-secondary">

            <td>Secondary</td>

            <td>Trishi</td>

            <td>8000000</td>

            <td>@trishi</td>

        </tr>

        <tr class="table-success">

            <td>Success</td>

            <td>Alavala</td>

            <td>7000000</td>

            <td>@alavala</td>

        </tr>

        <tr class="table-danger">

            <td>Danger</td>

            <td>Praveen</td>

            <td>6000000</td>

            <td>@praveen</td>

        </tr>

        <tr class="table-warning">

            <td>Warning</td>

            <td>Sateesh</td>

            <td>5000000</td>

            <td>@sateesh</td>

        </tr>

        <tr class="table-info">

            <td>Info</td>

            <td>Sushmitha</td>

            <td>4000000</td>

            <td>@sushmitha</td>

        </tr>

        <tr class="table-light">

            <td>Light</td>

            <td>Sudheer</td>

            <td>3000000</td>

            <td>@sudheer</td>

        </tr>

        <tr class="table-dark">

            <td>Dark</td>

            <td>Tulasi</td>

            <td>2000000</td>

            <td>@tulasi</td>

        </tr>

    </tbody>

</table>

If you observe the above code, we applied different type of contextual classes such as .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, and .table-dark on table rows (<tr>) to change the color.

 

The above example will return the result like as shown below.

 

 Bootstrap table with contextual colors example result

 

In case, if you want to apply contextual classes on dark-themed table, you need to use background utilities such as .bg-primary, .bg-secondary, .bg-success, etc. to achieve the same style because the regular table background variants are not available with the dark table.

 

Live Preview

<table class="table table-dark">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr class="bg-primary">

            <td>Primary</td>

            <td>Rohini</td>

            <td>9000000</td>

            <td>@rohini</td>

        </tr>

        <tr class="bg-secondary">

            <td>Secondary</td>

            <td>Trishi</td>

            <td>8000000</td>

            <td>@trishi</td>

        </tr>

        <tr class="bg-success">

            <td>Success</td>

            <td>Alavala</td>

            <td>7000000</td>

            <td>@alavala</td>

        </tr>

        <tr class="bg-danger">

            <td>Danger</td>

            <td>Praveen</td>

            <td>6000000</td>

            <td>@praveen</td>

        </tr>

        <tr class="bg-warning">

            <td>Warning</td>

            <td>Sateesh</td>

            <td>5000000</td>

            <td>@sateesh</td>

        </tr>

        <tr class="bg-info">

            <td>Info</td>

            <td>Sushmitha</td>

            <td>4000000</td>

            <td>@sushmitha</td>

        </tr>

    </tbody>

</table>

If you observe the above code, we used background classes such as .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info on dark table.

 

The above example will return the result like as shown below.

 

Bootstrap dark table with contextual classes example result

Bootstrap Small Table

In bootstrap, we can create a small or compactable table by applying .table-sm class to the <table> element. The .table-sm class will make tables more compact by cutting cell padding in half.

 

Live Preview

<table class="table table-sm table-bordered">

    <thead>

        <tr>

            <th>First Name</th>

            <th>Last Name</th>

            <th>Tel No.</th>

            <th>Email</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Suresh</td>

            <td>Dasari</td>

            <td>9000000</td>

            <td>@suresh</td>

        </tr>

        <tr>

            <td>Rohini</td>

            <td>Alavala</td>

            <td>8000000</td>

            <td>@rohini</td>

        </tr>

        <tr>

            <td>Trishika</td>

            <td>Dasari</td>

            <td>7000000</td>

            <td>@trishi</td>

        </tr>

    </tbody>

</table>

The above example will return the result like as shown below.

 

Bootstrap small table example result

Bootstrap Responsive Tables

In bootstrap, we can create responsive tables to enable horizontal scrollbar on small devices. To make any table responsive, you need to place the table (<table>) inside of div (<div>) and apply .table-responsive class on the <div> element like as shown below.

 

<div class="table-responsive">

  <table class="table">

    ...

  </table>

</div>

Following is the example of creating the responsive table in bootstrap.

 

Live Preview

<div class="table-responsive">

    <table class="table table-bordered">

        <thead>

            <tr>

                <th>First Name</th>

                <th>Last Name</th>

                <th>Tel No.</th>

                <th>Email</th>

                <th>Location</th>

                <th>Education</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Suresh</td>

                <td>Dasari</td>

                <td>9000000</td>

                <td>@suresh</td>

                <td>Hyderabad</td>

                <td>B.Tech</td>

            </tr>

            <tr>

                <td>Rohini</td>

                <td>Alavala</td>

                <td>8000000</td>

                <td>@rohini</td>

                <td>Guntur</td>

                <td>Agriculture</td>

            </tr>

            <tr>

                <td>Trishika</td>

                <td>Dasari</td>

                <td>7000000</td>

                <td>@trishi</td>

                <td>Guntur</td>

                <td>N/A</td>

            </tr>

        </tbody>

    </table>

</div>

The above example will return the result like as shown below.

 

Bootstrap responsive table example result

 

This is how we can the bootstrap classes to extend the default style of HTML tables based on requirements. 

 
 
 

Topics Covered