Bootstrap Tables


Bootstrap Basic Table

A basic Bootstrap table has a light padding and only horizontal dividers.

The .table class adds basic styling to a table:

Example

<table class="table">
	<thead>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
            <th>Phone</th>
		</tr>
	</thead>
	<tbody>
          <tr>
            <td>Sachin<td>
            <td>Yadav</td>
            <td>[email protected]</td>
            <td>11234567890</td>
        </tr>
        <tr>
            <td>Deepak</td>
            <td>Kumar</td>
            <td>[email protected]</td>
            <td>1234567890</td>
        </tr>
	</tbody>
</table>
Firstname Lastname Email Phone
Sachin Yadav [email protected] 11234567890
Deepak Kumar [email protected] 1234567890

Striped Rows

The .table-striped class adds zebra-stripes to a table:

Example

<table class="table table-striped">
	<thead>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
            <th>Phone</th>
		</tr>
	</thead>
	<tbody>
          <tr>
            <td>Sachin<td>
            <td>Yadav</td>
            <td>[email protected]</td>
            <td>11234567890</td>
        </tr>
        <tr>
            <td>Deepak</td>
            <td>Kumar</td>
            <td>[email protected]</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Soun</td>
            <td>Singh</td>
            <td>[email protected]</td>
            <td>1225567890</td>
        </tr>
	</tbody>
</table>
Firstname Lastname Email Phone
Sachin Yadav [email protected] 11234567890
Deepak Kumar [email protected] 1234567890
Soun Singh [email protected] 1225567890

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells:

Example

<table class="table table-bordered">
	<thead>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
            <th>Phone</th>
		</tr>
	</thead>
	<tbody>
          <tr>
            <td>Sachin<td>
            <td>Yadav</td>
            <td>[email protected]</td>
            <td>11234567890</td>
        </tr>
        <tr>
            <td>Deepak</td>
            <td>Kumar</td>
            <td>[email protected]</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Soun</td>
            <td>Singh</td>
            <td>[email protected]</td>
            <td>1225567890</td>
        </tr>
	</tbody>
</table>
Firstname Lastname Email Phone
Sachin Yadav [email protected] 11234567890
Deepak Kumar [email protected] 1234567890
Soun Singh [email protected] 1225567890

Hover Rows

The .table-hover class enables a hover state on table rows:

Example

<table class="table table-hover">
	<thead>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
            <th>Phone</th>
		</tr>
	</thead>
	<tbody>
          <tr>
            <td>Sachin<td>
            <td>Yadav</td>
            <td>[email protected]</td>
            <td>11234567890</td>
        </tr>
        <tr>
            <td>Deepak</td>
            <td>Kumar</td>
            <td>[email protected]</td>
            <td>1234567890</td>
        </tr>
         <tr>
            <td>Soun</td>
            <td>Singh</td>
            <td>[email protected]</td>
            <td>1225567890</td>
        </tr>
	</tbody>
</table>
Firstname Lastname Email Phone
Sachin Yadav [email protected] 11234567890
Deepak Kumar [email protected] 1234567890
Soun Singh [email protected] 1225567890

Contextual Classes

Contextual classes can be used to color table rows (tr>) or table cells (td>):

Example

<table class="table">
	<thead>
		<tr>
			<th>Firstname</th>
			<th>Lastname</th>
			<th>Email</th>
            <th>Phone</th>
		</tr>
	</thead>
	<tbody>
          <tr class="danger">
            <td>Sachin<td>
            <td>Yadav</td>
            <td>[email protected]</td>
            <td>11234567890</td>
        </tr>
        <tr class="success">
            <td>Deepak</td>
            <td>Kumar</td>
            <td>[email protected]</td>
            <td>1234567890</td>
        </tr>
         <tr class="warning">
            <td>Soun</td>
            <td>Singh</td>
            <td>[email protected]</td>
            <td>1225567890</td>
        </tr>
	</tbody>
</table>
Firstname Lastname Email Phone
Sachin Yadav [email protected] 11234567890
Deepak Kumar [email protected] 1234567890
Soun Singh [email protected] 1225567890
 

The contextual classes that can be used are:

Class Description
.active Applies the hover color to the table row or table cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

Share this article on