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:
| Firstname | Lastname | |
|---|---|---|
| Ram | Kumar | [email protected] |
| Mary | Moe | [email protected] |
| Jibu | George | [email protected] |
Bootstrap table striped
To add zebra stripes to your table you can use the .table-striped class. Here’s the sample code
Striped Rows
The .table-striped class is used to add zebra-stripes in a table :
Firstname Lastname Ram Kumar [email protected] Mary Moe [email protected] Jibu George [email protected] 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:
Firstname Lastname Ram Kumar [email protected] Mary Moe [email protected] Jibu George [email protected] Bootstrap table hover
To give a special effect on hover, we can use the
.table-hoverclass. The following code illustrates the same
Firstname Lastname Ram Kumar [email protected] Mary Moe [email protected] Jibu George [email protected]
Sr No Table Example 1 Simple Table Try It 2 Striped Table Try It 3 Border Table Try It Bootstrap table condensed
The
.table-condensedclass will help make a table compact, by cutting cell padding in half.See the code below for a better understanding
Firstname Lastname John Doe [email protected] Mary Moe [email protected] July Dooley [email protected] Bootstrap Contextual Classes with table
Contextual classes are special classes that can be used to the color table rows/table cells (<td>).
Sr No Item Price 1 Monitor $199 2 Mouse $12 3 Keyboard $34 4 Graphics Card $759 5 RAM $75 6 Head Phone $80 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.
.tableclass is used with.table-responsive{-sm|-md|-lg|-xl}classedFollowing is a sample code for responsive tables in Bootstrap:
# Firstname Lastname Age City Country 1 Anna Pitt 35 New York USA 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">
Sr No Item Price 1 Monitor $199 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 Ram 75 2 Mohan 72 Bootstrap table column width
Roll No Name Percentage 1 Ram 91 Bootstrap table without borders
Creating a table without a border is possible with bootstrap. To make a borderless table use class
.table-borderless
Roll No Name Branch 1 Ram Computer Science How to make a table responsive
to make a table responsive use
.tableclass with.table-responsive{-sm|-md|-lg|-xl}.
