Bootstrap 4 Table: Complete Tutorial With Examples

This tutorial explains all about Bootstrap 4 Tables including table head options, small table, table captions, dark tables, etc.:

In this tutorial, we have covered basic Bootstrap 4 table, table caption, table head options, small table, bordered & borderless tables, striped rows & hoverable rows, dark tables, contextual classes for table rows, table heads & table cells, contextual classes for the background of the table rows, table heads & table cells, Bootstrap responsive tables.

This tutorial also lists frequently asked questions (FAQs) of Bootstrap 4 tables.

Please note that we have used Bootstrap version 4 in all examples.

=> Explore The Simple Bootstrap Training Series Here

Table of Contents:

Basic Bootstrap 4 Table
Conclusion
- Was this helpful?
- Recommended Reading

Basic Bootstrap 4 Table

Creating a Bootstrap table is easy and straightforward. You need to add the .table class to <table>.

The following table summarizes the classes of Bootstrap 4 tables.

Class	Usage
.table	Convert a normal HTML table into a Bootstrap table
.thead-light	Add a light table head to a table
.thead-dark	Add a dark table head to a table
.table-sm	Convert a table into a small table.
.table-bordered	Add borders to a table.
.table-borderless	Remove borders from a table.
.table-striped	Add striped rows to a table.
.table-hover	Add hoverable rows to a table.
.table-active	Add grey color to a table.
.table-primary	Add blue color to a table.
.table-secondary	Add grey color to a table.
.table-success	Add green color to a table.
.table-danger	Add red color to a table.
.table-warning	Add orange color to a table.
.table-info	Add a light blue color to a table.
.table-light	Add a light grey color to a table.
.table-dark	Add a dark grey color to a table.
.bg-primary	Add blue color to the background of a table.
.bg-secondary	Add grey color to the background of a table.
.bg-success	Add green color to the background of a table.
.bg-danger	Add red color to the background of a table.
.bg-warning	Add orange color to the background of a table.
.bg-info	Add a light blue color to the background of a table.
.bg-light	Add a light grey color to the background of a table.
.bg-dark	Add a dark grey color to the background of a table.
.table-responsive	Make a table an always responsive table.
.table-responsive-sm	Make a table a responsive table when the screen size is small (screen width less than 576px).
.table-responsive-md	Make a table a responsive table when the screen size is medium (screen width less than 768px).
.table-responsive-lg	Make a table a responsive table when the screen size is large (screen width less than 992px).
.table-responsive-xl	Make a table a responsive table when the screen size is extra-large (screen width less than 1200px).

Example of a basic Bootstrap 4 table:

The below programming code shows an example of a basic Bootstrap 4 table. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
	
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>Student</th>
					<th>Result</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th>1</th>
					<td>Oliver</td>
					<td>Pass</td>
				</tr>
				<tr>
					<th>2</th>
					<td>Benjamin</td>
					<td>Pass</td>
				</tr>
				<tr>
					<th>3</th>
					<td>Amelia</td>
					<td>Absent</td>
				</tr>
			</tbody>
		</table>

	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Table Head Options

There are two types of table heads. They are:

Light table head: Add the .thead-light class to <thead> to create a light table head.
Dark table head: Add the .thead-dark class to <thead> to create a dark table head.

Example of table head options:

The below programming code shows an example of a table with a light table head and a table with a dark table head. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
	
		<!-- table with light heads -->
		<table class="table">
			<thead class="thead-light">
				<tr>
				  <th>Name</th>
				  <th>Username</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Rahul</td>
					<td>rahul@example.com</td>
				</tr>
				<tr>
					<td>Praveen</td>
					<td>praveen@example.com</td>
				</tr>
			</tbody>
		</table>
		
		<!-- table with dark heads -->
		<table class="table">
			<thead class="thead-dark">
				<tr>
				  <th>Name</th>
				  <th>Username</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Rahul</td>
					<td>rahul@example.com</td>
				</tr>
				<tr>
					<td>Praveen</td>
					<td>praveen@example.com</td>
				</tr>
			</tbody>
		</table>
		
	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code. (The first table shows a table with a light table head and the second table shows a table with a dark table head.)

Small Table

Add the .table-sm class to <table> to reduce the size of a table.

Example of a small table:

The below programming code shows an example of a small table. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
		<div class="row">
			<div class="col">
				<table class="table table-sm">
					<thead>
						<tr>
							<th>#</th>
							<th>Student</th>
							<th>Result</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Oliver</td>
							<td>Pass</td>
						</tr>
						<tr>
							<th>2</th>
							<td>Benjamin</td>
							<td>Pass</td>
						</tr>
						<tr>
							<th>3</th>
							<td>Amelia</td>
							<td>Absent</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Table Caption

Add the <caption>…</caption> element right after the opening of the table tag, <table>, to add a caption to a table.

Example of a table with a caption:

The below programming code shows an example of a table with a caption. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
	
		<table class="table">
			<caption>Delivery Orders</caption>
			<thead>
				<tr>
					<th>Invoice No.</th>
					<th>Status</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>185963</td>
					<td>Delivered</td>
				</tr>
				<tr>
					<td>199695</td>
					<td>Pending</td>
				</tr>
				<tr>
					<td>200192</td>
					<td>Pending</td>
				</tr>
			</tbody>
		</table>

	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Bordered And Borderless Tables

Add the .table-bordered class to <table> to add borders to a table and add the .table-borderless class to <table> to remove borders from a table.

Example of bordered and borderless tables:

The below programming code shows an example of a bordered table and a borderless table. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
	
		<table class="table table-bordered">
              <caption>Bordered Table</caption>
			<thead>
				<tr>
				  <th>Country</th>
				  <th>Capital</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>India</td>
					<td>New Delhi</td>
				</tr>
				<tr>
					<td>United States</td>
					<td>Washington, D.C.</td>
				</tr>
			</tbody>
		</table>
		
		<table class="table table-borderless">
		<caption>Borderless Table</caption>
			<thead>
				<tr>
				  <th>Country</th>
				  <th>Capital</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>India</td>
					<td>New Delhi</td>
				</tr>
				<tr>
					<td>United States</td>
					<td>Washington, D.C.</td>
				</tr>
			</tbody>
		</table>

	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code. (The first table shows a bordered table and the second table shows a borderless table.)

Striped Rows and Hoverable Rows

To convert rows into striped rows, add the .table-striped class to <table>, and to convert rows into hoverable rows, add the .table-hover class to <table>.

Example of striped rows and hoverable rows:

The below programming code shows an example of a table with striped rows and a table with hoverable rows. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
		<div class="row">
			<div class="col">
				<table class="table table-striped">
				<caption>Table with Striped Rows</caption>
					<thead>
						<tr>
							<th>#</th>
							<th>Subject</th>
							<th>Marks</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Computer Science</td>
							<td>92</td>
						</tr>
						<tr>
							<th>2</th>
							<td>English </td>
							<td>85</td>
						</tr>
						<tr>
							<th>3</th>
							<td>History</td>
							<td>60</td>
						</tr>
						<tr>
							<th>4</th>
							<td>Mathematics</td>
							<td>90</td>
						</tr>
						<tr>
							<th>5</th>
							<td>Science</td>
							<td>77</td>
						</tr>
					</tbody>
				</table>
				
				<table class="table table-hover">
				<caption>Table with Hoverable Rows</caption>
					<thead>
						<tr>
							<th>#</th>
							<th>Subject</th>
							<th>Marks</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<th>1</th>
							<td>Computer Science</td>
							<td>92</td>
						</tr>
						<tr>
							<th>2</th>
							<td>English </td>
							<td>85</td>
						</tr>
						<tr>
							<th>3</th>
							<td>History</td>
							<td>60</td>
						</tr>
						<tr>
							<th>4</th>
							<td>Mathematics</td>
							<td>90</td>
						</tr>
						<tr>
							<th>5</th>
							<td>Science</td>
							<td>77</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

When you move the cursor to a table row, it will turn grey.

Dark Tables

In this section, we are going to talk about three types of dark tables. They are,

Bordered dark tables: Add the .table-bordered class and the .table-dark class to create a bordered dark table.
Borderless dark tables: Add the .table-borderless class and the .table-dark class to create a borderless dark table.
Dark striped tables: Add the .table-striped class and the .table-dark class to create a dark striped table.

Example of dark tables:

The below programming code shows an example of a bordered dark table, a borderless dark table, and a dark striped table. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
	
		<table class="table table-bordered table-dark">
		<caption>Bordered Dark Table</caption>
			<thead>
				<tr>
					<th>Employee</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Mr. Peter</td>
					<td>$30,000</td>
				</tr>
				<tr>
					<td>Mr. Arnold</td>
					<td>$70,000</td>
				</tr>
				<tr>
					<td>Mr. Frank</td>
					<td>$30,000</td>
				</tr>
				<tr>
					<td>Mr. Hooper</td>
					<td>$25,000</td>
				</tr>
			</tbody>
		</table>
		
		<table class="table table-borderless table-dark">
		<caption>Borderless Dark Table</caption>
			<thead>
				<tr>
					<th>Employee</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Mr. Peter</td>
					<td>$30,000</td>
				</tr>
				<tr>
					<td>Mr. Arnold</td>
					<td>$70,000</td>
				</tr>
				<tr>
					<td>Mr. Frank</td>
					<td>$30,000</td>
				</tr>
				<tr>
					<td>Mr. Hooper</td>
					<td>$25,000</td>
				</tr>
			</tbody>
		</table>

		<table class="table table-striped table-dark">
		<caption>Dark Striped Table</caption>
			<thead>
				<tr>
					<th>Employee</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Mr. Peter</td>
					<td>$30,000</td>
				</tr>
				<tr>
					<td>Mr. Arnold</td>
					<td>$70,000</td>
				</tr>
				<tr>
					<td>Mr. Frank</td>
					<td>$30,000</td>
				</tr>
				<tr>
					<td>Mr. Hooper</td>
					<td>$25,000</td>
				</tr>
			</tbody>
		</table>
		
	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Contextual Classes For Table Rows, Table Heads And Table Cells

Use the following contextual classes for the table rows, table heads, and table cells. It will add various colors to the components of the table.

.table-active – Add grey color to a table.
.table-primary – Add blue color to a table.
.table-secondary – Add grey color to a table.
.table-success – Add green color to a table.
.table-danger – Add red color to a table.
.table-warning – Add orange color to a table.
.table-info – Add a light blue color to a table.
.table-light – Add a light grey color to a table.
.table-dark – Add a dark grey color to a table.

Example of contextual classes for the table rows, table heads, and table cells:

The below programming code shows examples of contextual classes for the table rows, table heads, and table cells. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
		<div class="row">
			<div class="col">
				<table class="table">
				<caption>Contextual classes for table rows</caption>
					<thead>
					<tr>
					  <th>Class</th>
					  <th>Heading</th>
					  <th>Heading</th>
					</tr>
					</thead>
					<tbody>
					<tr class="table-active">
						<th>Active</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-primary">
						<th>Primary</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-secondary">
						<th>Secondary</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-success">
						<th>Success</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-danger">
						<th>Danger</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-warning">
						<th>Warning</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-info">
						<th>Info</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-light">
						<th>Light</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="table-dark">
						<th>Dark</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="col">
				<table class="table">
				<caption>Contextual classes for table heads and table cells</caption>
					<thead>
					<tr>
					  <th>Class</th>
					  <th>Heading</th>
					  <th>Heading</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<th class="table-active">Active</th>
						<td class="table-active">Cell</td>
						<td class="table-active">Cell</td>
					</tr>
					<tr>
						<th class="table-primary">Primary</th>
						<td class="table-primary">Cell</td>
						<td class="table-primary">Cell</td>
					</tr>
					<tr>
						<th class="table-secondary">Secondary</th>
						<td class="table-secondary">Cell</td>
						<td class="table-secondary">Cell</td>
					</tr>
					<tr>
						<th class="table-success">Success</th>
						<td class="table-success">Cell</td>
						<td class="table-success">Cell</td>
					</tr>
					<tr>
						<th class="table-danger">Danger</th>
						<td class="table-danger">Cell</td>
						<td class="table-danger">Cell</td>
					</tr>
					<tr>
						<th class="table-warning">Warning</th>
						<td class="table-warning">Cell</td>
						<td class="table-warning">Cell</td>
					</tr>
					<tr>
						<th class="table-info">Info</th>
						<td class="table-info">Cell</td>
						<td class="table-info">Cell</td>
					</tr>
					<tr>
						<th class="table-light">Light</th>
						<td class="table-light">Cell</td>
						<td class="table-light">Cell</td>
					</tr>
					<tr>
						<th class="table-dark">Dark</th>
						<td class="table-dark">Cell</td>
						<td class="table-dark">Cell</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Contextual Classes For Background of Table Rows, Table Heads And Table Cells

Use the following contextual classes for the background of the table rows, table heads, and table cells. It will add various colors to the background of the table components.

.bg-primary – Add blue color to the background of a table.
.bg-secondary – Add grey color to the background of a table.
.bg-success – Add green color to the background of a table.
.bg-danger – Add red color to the background of a table.
.bg-warning – Add orange color to the background of a table.
.bg-info – Add a light blue color to the background of a table.
.bg-light – Add a light grey color to the background of a table.
.bg-dark – Add a dark grey color to the background of a table.

Example of contextual classes for table background of the table rows, table heads, and table cells:

The below programming code shows an example of contextual classes for the background of the table rows, table heads, and table cells. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
		<div class="row">
			<div class="col">
				<table class="table">
				<caption>Contextual classes for background of table rows</caption>
					<thead>
					<tr>
					  <th>Class</th>
					  <th>Heading</th>
					  <th>Heading</th>
					</tr>
					</thead>
					<tbody>
					<tr class="bg-primary">
						<th>Primary</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-secondary">
						<th>Secondary</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-success">
						<th>Success</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-danger">
						<th>Danger</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-warning">
						<th>Warning</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-info">
						<th>Info</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-light">
						<th>Light</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					<tr class="bg-dark">
						<th>Dark</th>
						<td>Cell</td>
						<td>Cell</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div class="col">
				<table class="table">
				<caption>Contextual classes for background of table heads and cells</caption>
					<thead>
					<tr>
					  <th>Class</th>
					  <th>Heading</th>
					  <th>Heading</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<th class="bg-primary">Primary</th>
						<td class="bg-primary">Cell</td>
						<td class="bg-primary">Cell</td>
					</tr>
					<tr>
						<th class="bg-secondary">Secondary</th>
						<td class="bg-secondary">Cell</td>
						<td class="bg-secondary">Cell</td>
					</tr>
					<tr>
						<th class="bg-success">Success</th>
						<td class="bg-success">Cell</td>
						<td class="bg-success">Cell</td>
					</tr>
					<tr>
						<th class="bg-danger">Danger</th>
						<td class="bg-danger">Cell</td>
						<td class="bg-danger">Cell</td>
					</tr>
					<tr>
						<th class="bg-warning">Warning</th>
						<td class="bg-warning">Cell</td>
						<td class="bg-warning">Cell</td>
					</tr>
					<tr>
						<th class="bg-info">Info</th>
						<td class="bg-info">Cell</td>
						<td class="bg-info">Cell</td>
					</tr>
					<tr>
						<th class="bg-light">Light</th>
						<td class="bg-light">Cell</td>
						<td class="bg-light">Cell</td>
					</tr>
					<tr>
						<th class="bg-dark">Dark</th>
						<td class="bg-dark">Cell</td>
						<td class="bg-dark">Cell</td>
					</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
</body>
</html>

The below screenshot shows the browser output of the above programming code.

Bootstrap Responsive Tables

There are two types of Bootstrap responsive tables. They are,

#1) Always responsive tables: Add the .table-responsive class to <div> to create an always responsive table. It will add a horizontal scrollbar to the table when the horizontal screen width is too big.

#2) Breakpoint specific responsive tables: Add one of the below classes to <div> to create a breakpoint specific responsive table. It will add a horizontal scrollbar to the table when required (depending on the screen width).

- .table-responsive-sm – For a small screen width (less than 576px)
- .table-responsive-md – For a medium screen width (less than 768px)
- .table-responsive-lg – For a large screen width (less than 992px)
- .table-responsive-xl – For an extra-large screen width (less than 1200px)

Example of Bootstrap responsive tables:

The below programming code shows an example of an always responsive table and a breakpoint-specific responsive table. You can try this example by running the below programming code.

<!DOCTYPE html>
<html lang="en">
<head>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-3">
	
		<div class="table-responsive">
			<table class="table">
			<caption>Always responsive table</caption>
			  <thead>
				<tr>
				  <th>#</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				</tr>
			  </thead>
			  <tbody>
				<tr>
				  <th>1</th>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				</tr>
				<tr>
				  <th>2</th>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				</tr>
			  </tbody>
			</table>
		</div>

		<div class="table-responsive-sm">
			<table class="table">
			<caption>Breakpoint specific responsive table</caption>
			  <thead>
				<tr>
				  <th>#</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				  <th>Heading</th>
				</tr>
			  </thead>
			  <tbody>
				<tr>
				  <th>1</th>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				</tr>
				<tr>
				  <th>2</th>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				  <td>Data</td>
				</tr>	
			  </tbody>
			</table>
		</div>
		
	</div>
</body>
</html>

Output 1: Normal or full-screen view

The below screenshot shows the browser output of the above programming code on a normal or full-screen view.

Output 2: Small screen view

The below screenshot shows the browser output of the above programming code on a small screen view.

Similarly, you can use the .table-responsive-md, .table-responsive-lg and .table-responsive-xl classes.

Frequently Asked Questions

In this section, we are going to look at some of the FAQs of tables in Bootstrap 4.

Q #1) What is the main class used in Bootstrap tables?

Answer: The .table class is the main class used in Bootstrap tables.

Q #2) How to add a caption to a table?

Answer: Place the <caption>…</caption> element right after the opening of the <table> tag.

Q #3) What are the different table head options?

Answer: There are two table head options named light table head and dark table head, and they use the .thead-light and .thead-dark classes respectively.

Q #4) How to make a table small?

Answer: Add the .table-sm class to <table>.

Q #5) What is the class used to add borders to a table?

Answer: The .table-bordered class is used to add borders to a table.

Q #6) What is the class used to remove borders from a table?

Answer: The .table-borderless class is used to remove borders from a table.

Q #7) How to add striped rows to a table?

Answer: Add the .table-striped class to <table> to add striped rows to a table.

Q #8) How to add hoverable rows to a table?

Answer: Add the .table-hover class to <table> to add hoverable rows to a table.

Q #9) How to make a table dark?

Answer: Add the .table-dark class to <table> to make a table dark.

Q #10) What are the contextual classes used for table rows, heads, and cells?

Answer: The contextual classes used for table rows, heads and cells are .table-active, .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light and .table-dark.

Q #11) What are the contextual classes used for the background of table rows, heads, and cells?

Answer: The contextual classes used for the background of table rows, heads and cells are .bg-primary, .bg-secondary, .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-light and .bg-dark.

Q #12) What are the two types of Bootstrap responsive tables?

Answer: Always responsive tables and breakpoint-specific responsive tables are the two types of responsive tables. They use the .table-responsive and .table-responsive-* classes respectively.

Conclusion

Bootstrap 4 uses a wide range of classes to add styles to an entire table or parts of a table such as table rows, table heads, and table cells. To better understand table content, a table caption may also add to a table by adding the <caption>…</caption> element straight after the opening of the <table> tag.

We have come to the end of this tutorial. Hope you have found this tutorial helpful. Hope to see you soon with the next tutorial of the series where we will discuss the Bootstrap 4 list groups.

Happy learning!

=> Check ALL Bootstrap Tutorials Here

Was this helpful?

Thanks for your feedback!

Basic Bootstrap 4 Table

Table Head Options

Small Table

Table Caption

Bordered And Borderless Tables

Striped Rows and Hoverable Rows

Dark Tables

Contextual Classes For Table Rows, Table Heads And Table Cells

Contextual Classes For Background of Table Rows, Table Heads And Table Cells

Bootstrap Responsive Tables

Frequently Asked Questions

Conclusion

Was this helpful?

Recommended Reading

Leave a Comment Cancel reply