Here we will discuss various ways in which Bootstrap can help the developers to make the tables look perfect on the web-pages.
Bootstrap Basic Table
Let us start with the basic table in bootstrap. Here the design is minimal with light padding and only horizontal dividers.
The class used for basic table is .table. Here’s a sample code for the same:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
Striped Rows
To add zebra stripes to your table you can use the.table-striped class. Here’s the sample code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div class="container"> <h2>Striped Rows</h2> <p>The .table-striped class is used to add zebra-stripes in a table :</p> <table class="table table-striped"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> </div> |
Bordered Table
For adding table borders, Bootstrap has provided the .table-bordered class. This will add borders at all sides of the table and cells.
Observer the below code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table class="table table-bordered"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
Hover Rows
To give a special effect on hover, we can use the .table-hover class. Following code illustrates the same
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table class="table table-hover"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
Condensed Table
The .table-condensed class will help make a table compact, by cutting cell padding in half.
See the code below for better understanding
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<table class="table table-condensed"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>july@example.com</td> </tr> </tbody> </table> |
Contextual Classes
Contextual classes are special classes that can be used to color table rows/table cells (<td>)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>Default</td> <td>Defaultson</td> <td>def@somemail.com</td> </tr> <tr class="success"> <td>Success</td> <td>Doe</td> <td>john@example.com</td> </tr> <tr class="danger"> <td>Danger</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr class="info"> <td>Info</td> <td>Dooley</td> <td>july@example.com</td> </tr> <tr class="warning"> <td>Warning</td> <td>Refs</td> <td>bo@example.com</td> </tr> <tr class="active"> <td>Active</td> <td>Activeson</td> <td>act@example.com</td> </tr> </tbody> </table> |
Here is a list of contextual classes provided by Bootstrap:
- .active: To apply the hover color to the table rows or table cell
- .info: To indicates neutral informative change of action
- .success: To show a successful or positive action
- .danger: To show some dangerous (potentially negative) action
- .warning: Indicates a warning that might need attention
Responsive Tables
Responsiveness is an indispensable feature of Bootstrap for any web-page element.
In case of tables, the responsiveness can be achieved using the .table-responsive class.
This makes the table horizontally scrollable on any device with
However, there is no considerable change in devices with the screen size larger than 768px.
Following is a sample code for responsive tables in Bootstrap:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>City</th> <th>Country</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>USA</td> </tr> </tbody> </table> </div> |