Bootstrap Tables

tutorial and example
tutorial and example

We can create different types of responsive and awesome bootstrap table like: striped , border etc.

Bootstrap Basic Table

We can create a basic bootstrap table by using its class .table. It has light padding and horizontal divider.

Example

Try Now

Bootstrap Border Table

We can create bootstrap border table by using its class .table-bordered.

Bootstrap Striped Row Table

We can create bootstrap striped row table by using its class .zebra-stripes.

Bootstrap Hover Rows Table

We can create bootstrap hover table by using its class .table –hover. When we will use it then the row will automatically selected.

Bootstrap Condensed Table

We can create a compact table by cutting cell padding in half, we have to use its class .table-condensed.

Bootstrap Contextual classes:

In Bootstrap, Contextual classes are used to color the table row or table cells.

There are various contextual classes given below in the table.

Class Description
.active It is used to apply the hover color to the table row or table cell.
.success It is used to indicate a successful or positive action.
.info It is used to indicate a neutral informative change or action.
.warning It is used to specify a warning that might need attention.
.danger It is used to indicate a dangerous or potentially negative action.

Example:

Try Now

Bootstrap Responsive Tables

In Bootstrap, We can create responsive tables by using its class .tables-responsive. We can check the responsive table, by resizing it horizontally.

Example: