Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap 4
communitycreator

What are different table styles in Bootstrap 4?

Fouzia Bashir

Overview

Bootstrap has a wide variety of styling tables. We can style tables with color, borders, and other customization options. Likewise, we can also make the basic HTML tables responsive according to the desired screen size.

Syntax

<table class="table subclassName"> Content of the Table <table>

We replace the subclassName with the subclass or attribute we aim to include.

Styled tables

Here is a list of subclasses that are available in Bootstrap for adding borders, colored headers or rows, striped patterns, and more:

Subclasses of the table class

Subclass

Syntax

Description

.table-borderless

<table class="table table-borderless">

Removes all existing borders from the table

.table-striped

<table class="table table-striped">

Creates alternative dark and light rows in the table

.thead-dark

<table class="table thead-dark">

Adds a dark color to the header of the table

.thead-light

<table class="table thead-light">

Adds a light gray color to the header of the table

.table-dark

<table class="table table-dark">

Adds a dark background to the table

.table-light

<table class="table table-light">

Adds a light gray background to the table

.table-hover

<table class="table table-hover">

Adds a hovering effect to the rows due to which the row changes color whenever the cursor hovers over it

.table-sm

<table class="table table-sm">

Reduces the size of the table by cutting the padding in the cells by half

Example: bordered tables

This class adds borders to all the sides and cells of the table which improves its look and feel.

  • HTML
Bordered tables in bootstrap

Explanation

  • Line 9: In the <table> tag, we add the table-bordered class to add borders to all the sides and cells of the respective table.

Example: striped tables

Let’s see how to use striped tables in the example below:

  • HTML
Striped tables in bootstrap

Explanation

In the example above, we have a table with 3 observations of students. We’ll use bootstrap to make it a striped table.

  • Line 9: We use the .table-striped subclass to generate a striped table.

RELATED TAGS

bootstrap 4
communitycreator
RELATED COURSES

View all Courses

Keep Exploring