Javatpoint Logo
Javatpoint Logo

Bootstrap Tables

We can create different types of Bootstrap tables by using different classes to style them.


Bootstrap Basic Table:

The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.

Example:

Test it Now

Bootstrap Striped Rows Table:

The .table-striped class is used to add zebra-stripes to a table:

Test it Now

Bootstrap Bordered table:

The .table-bordered class is used to add borders on all sides of the table and cells:

Test it Now

Bootstrap Hover rows Table:

The .table-hover class is used to enable a hover state on table rows:

Test it Now

Bootstrap Condensed table:

The .table-condensed class is used to make a table more compact by cutting cell padding in half:

Test it Now

Bootstrap Contextual classes:.

Contextual classes are used to color table rows (<tr>) or table cells (<td>):

Following are the different contextual classes:

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

Example:

Test it Now

Responsive tables:

The .table-responsive class is used to create a responsive table. You can open the responsible table even on small devices (under 768px). Then the table will be scrolled horizontally. Displays larger than 768px wide, there is no difference.

See this example:

Test it Now

Some newly added tables in Bootstrap 4:

Black/Dark Table

The .table-dark class is used to add a black background to the table:

Example

Test it Now

Dark Striped Table

Combine the .table-dark class and .table-striped class to create a dark, striped table:

Example

Test it Now

Hoverable Dark Table

The .table-hover class is used to add a hover effect (grey background color) on table rows:

Example

Test it Now

Bootstrap 4 Contextual Table

Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).

The classes that can be used are:

.table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:

Let's take an example to see the usage of all contextual classes in a Bootstrap 4 table.

Example

Test it Now

Table Head Colors

You can change the background color of the table header by using .thead-dark class to add a black background to table headers, and the .thead-light class to add a grey background to table headers.

Example:

Test it Now

Small Table

The .table-sm class is used to make the table smaller by cutting cell padding in half.

Example:

Test it Now
Next TopicBootstrap Form




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA