BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
SPONSORED LINKS
Advertisements

Bootstrap Tables

In this tutorial you will learn how to create elegant tables with Bootstrap.

What is Table

The HTML tables are used to present data in grid manner like row and columns. Using Bootstrap you can greatly improve the appearance of table in a quick and easy way.

See the tutorial on HTML Tables to learn more about tables.

Creating a Simple Table with Bootstrap

You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default), by just adding the Bootstrap's class .table to the <table> element.

<table class="table">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:

You can also create inverted version of this table, i.e. table with light text on dark backgrounds, by adding an extra class .table-dark to the .table base class, like this:

<table class="table table-dark">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:

Tip: You can add an extra class .table-dark to the .table element to create dark version of any table such as stripped, hoverable, bordered, compact table, and so on.


Creating Tables with Striped Rows

You can create table with alternate background like zebra-stripes by simply adding the Bootstrap's class .table-striped to the .table base class.

This is achieved by adding the background-color to the table row within the <tbody> element via the :nth-child CSS selector. Here's an example:

<table class="table table-striped">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:

Similarly, you can also create inverted or dark version of the stripped table adding an extra class .table-dark to the table, as shown in the following example:

<table class="table table-striped table-dark">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:


Creating Table with Borders on All Sides

You can also add borders to the all table cells by adding an extra Bootstrap's class .table-bordered to the .table base class, as shown in the following example:

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:


Creating Borderless Tables

You can also create borderless tables using the class .table-borderless on the .table element.

<table class="table table-borderless">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:


Enabling Hover State on Table Rows

You can also enable a hover state on table rows within a <tbody> element by adding the Bootstrap's class .table-hover to the .table base class. Here's an example:

<table class="table table-hover">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:


Creating Small or Compact Table

You can also make your tables more compact and save the space through adding an extra class .table-sm to the .table base class. The class .table-sm makes the table compact by cutting the cell padding in half. Here's an example of a small table:

<table class="table table-sm">
    <thead>
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:


Setting Table Head Colors

You can also specify different background colors for the table head using the modifier classes .thead-light or .thead-dark on the <thead> element.

The following example uses the class .thead-light to create a table with light head.

<table class="table">
    <thead class="thead-light">
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:

Likewise, you can use the class .thead-dark to create a table with dark head.

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>Row</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Clark</td>
            <td>Kent</td>
            <td>clarkkent@mail.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
            <td>Carter</td>
            <td>johncarter@mail.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Peter</td>
            <td>Parker</td>
            <td>peterparker@mail.com</td>
        </tr>            
    </tbody>
</table>

— The output of the above example will look something like this:


Optional Emphasis Classes for Table Rows

There are some contextual classes to emphasize the row or individual cells data like success, warning, danger, etc. through coloring its background.

<table class="table">
<thead>
    <tr>
        <th>Row</th>
        <th>Bill</th>
        <th>Payment Date</th>
        <th>Payment Status</th>
    </tr>
</thead>
<tbody>
    <tr class="table-primary">
        <td>1</td>
        <td>Credit Card</td>
        <td>04/07/2019</td>
        <td>Waiting for statement</td>
    </tr>
    <tr class="table-secondary">
        <td>2</td>
        <td>Insurance</td>
        <td>02/07/2019</td>
        <td>Cancelled</td>
    </tr>
    <tr class="table-success">
        <td>3</td>
        <td>Water</td>
        <td>01/07/2019</td>
        <td>Paid</td>
    </tr>
    <tr class="table-info">
        <td>4</td>
        <td>Internet</td>
        <td>05/07/2019</td>
        <td>Change plan</td>
    </tr>
    <tr class="table-warning">
        <td>5</td>
        <td>Electricity</td>
        <td>03/07/2019</td>
        <td>Pending</td>
    </tr>
    <tr class="table-danger">
        <td>6</td>
        <td>Telephone</td>
        <td>06/07/2019</td>
        <td>Due</td>
    </tr>
    <tr class="table-active">
        <td>7</td>
        <td>DTH</td>
        <td>04/07/2019</td>
        <td>Deactivated</td>
    </tr>            
    <tr class="table-light">
        <td>8</td>
        <td>Car Service</td>
        <td>08/07/2019</td>
        <td>Call in to confirm</td>
    </tr>
    <tr class="table-dark">
        <td>9</td>
        <td>Gas</td>
        <td>06/07/2019</td>
        <td>Payment failed</td>
    </tr>
</tbody>
</table>

— The output of the above example will look something like this:

Check out the snippets section for examples of some beautifully designed Bootstrap tables.


Creating Responsive Tables with Bootstrap

You can also create responsive tables to enable horizontal scrolling on small devices.

To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it. You can also specify when the table should have a scrollbar, based on the screen width, using the classes .table-responsive{-sm|-md|-lg|-xl}

<div class="table-responsive"> 
    <table class="table">
        <thead>
            <tr>
                <th>Row</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
                <th>Biography</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Clark</td>
                <td>Kent</td>
                <td>clarkkent@mail.com</td>
                <td>Lorem ipsum dolor sit amet...</td>
            </tr>
            <tr>
                <td>2</td>
                <td>John</td>
                <td>Carter</td>
                <td>johncarter@mail.com</td>
                <td>Vestibulum consectetur scelerisque...</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Peter</td>
                <td>Parker</td>
                <td>peterparker@mail.com</td>
                <td>Integer pulvinar leo id risus...</td>
            </tr>
        </tbody>
    </table>
</div>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.