Bootstrap Tables-striped, border, hover, responsive

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.

bootstrap table basic

The class used for the basic table is .table. Here’s a sample code for the same:

Bootstrap table striped

 Bootstrap table striped

To add zebra stripes to your table you can use the .table-striped class. Here’s the sample code

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.

Bootstrap table border

Observer the below code:

Bootstrap table hover

To give a special effect on hover, we can use the .table-hover class. The following code illustrates the same

Sr NoTableExample
1Simple Table Try It
2Striped Table Try It
3Border 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

Bootstrap Contextual Classes with table

Contextual classes are special classes that can be used to the color table rows/table cells (<td>).

Bootstrap Contextual Classes with 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:

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">

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

Bootstrap table column width

Bootstrap table without borders

Creating a table without a border is possible with bootstrap. To make a borderless table use class .table-borderless

How to make a table responsive

to make a table responsive use .table class with .table-responsive{-sm|-md|-lg|-xl}.