Bootstrap Tables

HTML table element can be nicely styled and make it responsive using Bootstrap. Tables are used to display information in rows and columns format.

Plain HTML tables does not have pleasing look, but Bootstrap will convert them to good looking blocks just easily.

Basic Bootstrap Table

All we need to do is just add a class "table" to the HTML table element and the rest will be taken care by bootstrap.

    <table class="table">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Name</th>
                <th>Type</th>
                <th>Scientific</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Crocodile</td>
                <td>Reptile</td>
                <td>Crocodylinae</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Lion</td>
                <td>Animal</td>
                <td>Panthera leo</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Seahorse</td>
                <td>Marine Creature</td>
                <td>Hippocampus</td>
            </tr>
        </tbody>
    </table>

Example Output

Bootstrap Table Classes

Following are the available Bootstrap classes. "table" style along with other below styles can be added to style the tables.

Bootstrap Class	How to Apply	Description
.table	<table class="table">	A basic bootstrap table.
.table-striped	<table class="table table-striped">	Zebra-striping for tables with alternate row coloring.
.table-bordered	<table class="table table-bordered">	To add border on all sides of the table.
.table-hover	<table class="table table-hover">	On mouse over rows will be highlighted.
.table-condensed	<table class="table table-condensed">	Reduces cellpadding into half and compacts the table.
.table-responsive	<table class="table table-responsive">	Makes the tables responsive by adding horizontal scroll bar on smaller devices.

Contextual classes .active, .success, .info, .warning and .danger can be used to highlight a row or table cell.

Bootstrap Table Example

In the following bootstrap table we can see usage of multiple table styles and contextual classes to highlight rows.

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>S.No.</th>
                <th>Name</th>
                <th>Type</th>
                <th>Scientific</th>
            </tr>
        </thead>
        <tbody>
            <tr class="info">
                <td>1</td>
                <td>Crocodile</td>
                <td>Reptile</td>
                <td>Crocodylinae</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Lion</td>
                <td>Animal</td>
                <td>Panthera leo</td>
            </tr>
            <tr class="success">
                <td>3</td>
                <td>Seahorse</td>
                <td>Marine Creature</td>
                <td>Hippocampus</td>
            </tr>
        </tbody>
    </table>

Example Output