Here we will discuss various ways in which Bootstrap can help the developers to make the tables look perfect on the web pages.
Bootstrap table styles
All Table styles are inherited in bootstrap4.
using CSS classes we can create a simple, striped, bordered table.
Can add the hover effect. easily include colors in rows and columns.
let’s see them one by one
Bootstrap table basic
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 the 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>Ram</td> <td>Kumar</td> <td>ram@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>Jibu</td> <td>George</td> <td>jibuGeorge@example.com</td> </tr> </tbody> </table> |
Bootstrap table striped
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 | <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>Ram</td> <td>Kumar</td> <td>ram@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>Jibu</td> <td>George</td> <td>jibuGeorge@example.com</td> </tr> </tbody> </table> |
Bootstrap table border
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>Ram</td> <td>Kumar</td> <td>ram@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>Jibu</td> <td>George</td> <td>jibuGeorge@example.com</td> </tr> </tbody> </table> |
Bootstrap table hover
To give a special effect on hover, we can use the .table-hover class. The 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>Ram</td> <td>Kumar</td> <td>ram@example.com</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>mary@example.com</td> </tr> <tr> <td>Jibu</td> <td>George</td> <td>jibuGeorge@example.com</td> </tr> </tbody> </table> |
| Sr No | Table | Example |
|---|---|---|
| 1 | Simple Table | Try It |
| 2 | Striped Table | Try It |
| 3 | Border Table | Try It |
Bootstrap table condensed
The .table-condensed class will help make a table compact, by cutting cell padding in half.
See the code below for a 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> |
Bootstrap Contextual Classes with table
Contextual classes are special classes that can be used to the 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 | <table class="table"> <tr> <th>Sr No</th> <th>Item</th> <th>Price</th> </tr> <tr class="bg-primary text-white"> <td>1</td> <td>Monitor</td> <td>$199</td> </tr> <tr class="bg-success text-white"> <td>2</td> <td>Mouse</td> <td>$12</td> </tr> <tr class="bg-warning text-white"> <td>3</td> <td>Keyboard</td> <td>$34</td> </tr> <tr class="bg-danger text-white"> <td>4</td> <td>Graphics Card</td> <td>$759</td> </tr> <tr class="bg-info text-white"> <td>5</td> <td>RAM</td> <td>$75</td> </tr> <tr> <td>6</td> <td>Head Phone</td> <td>$80</td> </tr> </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
Bootstrap responsive tables
Responsiveness is an indispensable feature of Bootstrap for any web page element.
In the case of tables, responsiveness can be achieved using the .table-responsive class.
This makes the table horizontally scrollable on any device with screen width less than 768px.
However, there is no considerable change in devices with a screen size larger than 768px.
.table class is used with .table-responsive{-sm|-md|-lg|-xl} classed
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> |
Bootstrap 4 table example
Above all, we have seen basic examples of table all are compatible with bootstrap 4.
Let us see one more example
How to show names of students and branches in the table.
Bootstrap table header color
to set table header color use contextual classes as below.
<th class="table-success">
<th class="table-danger">
<th class="table-info">
<th class="table-warning">
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="table-responsive"> <table class="table table-bordered"> <tr class="table-primary"> <th>Sr No</th> <th>Item</th> <th>Price</th> </tr> <tr> <td>1</td> <td>Monitor</td> <td>$199</td> </tr> </table> |
Bootstrap table row color
use contextual classes with <tr> it will add color to specified table row.
like
<tr class="table-success">
<tr class="table-danger">
<tr class="table-info">
<tr class="table-warning">
etc
1 2 3 4 5 6 7 8 9 10 11 | <tr class="table-success"> <td>1</td> <td>Ram</td> <td>75</td> </tr> <tr class="table-success"> <td>2</td> <td>Mohan</td> <td>72</td> </tr> </table> |
Bootstrap table column width
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <thead> <tr class="d-flex"> <th class="col-2">Roll No</th> <th class="col-7">Name</th> <th class="col-3">Percentage</th> </tr> </thead> <tbody> <tr class="d-flex"> <td class="col-2">1</td> <td class="col-7">Ram</td> <td class="col-3">91</td> </tr> </tbody> </table> |
Bootstrap table without borders
Creating a table without a border is possible with bootstrap. To make a borderless table use class .table-borderless
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <table class="table table-borderless"> <thead> <tr> <th>Roll No</th> <th>Name</th> <th>Branch</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Ram</td> <td>Computer Science</td> </tr> </tbody> </table> |
How to make a table responsive
to make a table responsive use .table class with .table-responsive{-sm|-md|-lg|-xl}.