June 4th, 2020 
Prerana Kasar Bootstrap 4 Default Or Basic Table
Bootstrap 4 provides some classes to style or designed the HTML Table. These classes enhance the design look and feel of the HTML table.
Default Or Basic Table
The bootstrap 4 provide the class .table to create the default table. The design of the default table having light grey color horizontal lines with some padding.
Example 1 – Bootstrap 4 Basic Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Default Table</h2>
<table class="table">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the class .table to the <table> tag to create the basic designed table. The below image shows the results of the above code.
Stripped Table
The bootstrap 4 provide the class .table-stripped to create the alternate-stripes to the table. The alternate stripes are of light-grey and white background-colors.
Example 2 – Bootstrap 4 Stripped Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Table</h2>
<table class="table table-striped">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .table and .table-striped to the <table> tag to create the alternate-striped designed table. The below image shows the results of the above code.
Bordered Table
The bootstrap 4 provide the class .table-bordered to add borders to all sides of the table.
Example 3 – Bootstrap 4 Bordered Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .table and .table-bordered to the <table> tag to create the table with border. The table bordered is of light grey color.
Borderless Table
The bootstrap 4 provide the class .table-borderless to remove all the bordered of the table. In other words to create the table without border.
Example 4 – Bootstrap 4 Borderless Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Borderless Table</h2>
<table class="table table-borderless">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .table and .table-borderless to the <table> tag to create the table without border.
Hover Table
The bootstrap 4 provide the class .table-hover to add the hover effect to the table rows.
Example 5 – Bootstrap 4 Hover Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Hover Table</h2>
<table class="table table-hover">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .table and .table-hover to the <table> tag to add on the hover effect or when you put the cursor on the table row the background-color will changed in gey color.
Dark Table
The bootstrap 4 provide the class .table-dark to create a dark or black color background table with the white text color.
Example 6 – Bootstrap 4 Dark Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Dark Table</h2>
<table class="table table-dark">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .table and .table-dark to the <table> tag to create a table having black background-color and white text-color.
Dark Striped Table
Apply the class .table-dark and .table-striped together to create the dark, striped table..
Example 7 – Bootstrap 4 Dark Striped Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Dark Striped Table</h2>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .table-striped and .table-dark together to the <table> tag to create a dark table having alternate stripes.
Table Head Colors
Bootstrap 4 provides the class .thaed-light and haed-dark two classes to apply the colors to the table header. Where class .haed-light is used for the light-grey color background of the table head and class .table-dark is used to apply the dark color background of the table header with the white text color.
Example 8 – Bootstrap 4 Table Head Color Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Dark Head Table</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
</tbody>
</table>
<h2>Light Head Table</h2>
<table class="table">
<thead class="thead-light">
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the classes .thead-light and .thead-dark to the <thead> tag to create a dark and light table header.
Small Table
Bootstrap 4 provides the class .table-sm to create small size table by removing the extra cell padding of the table.
Example 9 – Bootstrap 4 Small Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Small Table</h2>
<table class="table table-bordered table-sm">
<thead class="thead-dark">
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the class.table-sm to the <table> tag to reduce the size of the table by removing the extra padding from the cells of the table.
Contextual Classes
Through Contextual Classes, text-color and the background-color of the table row and table data will be changed as per the class name. The given code applied the different class to the rows of the table. Please read the below code to know the classes.
Example 10 – Bootstrap 4 Contextual Classes Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Contextual Classes Table</h2>
<table class="table table-bordered table-sm">
<thead class="thead-dark">
<tr>
<th>Name</th>
<th>Class</th>
<th>Description About Claases</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>default</td>
<td>Default table</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>primary</td>
<td>Blue: Specify an important action</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>success</td>
<td>Green: Specify a successful and positive action</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>danger</td>
<td>Red: Specify a dangerous and negative action</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>info</td>
<td>Light blue: Specify a neutral informative action</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>warning</td>
<td>Orange: Specify a warning that might need attention</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>active</td>
<td>Grey: Applies the hover color to the table row</td>
</tr>
<tr class="table-secondary">
<td>secondry</td>
<td>Secondry</td>
<td>Grey: Specify a less important action</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>light</td>
<td>Light grey color table row background</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>dark</td>
<td>Dark grey color table row background</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here we apply the different contextual classes to the table row and the above code also describe the information about the contextual classes so please read carefully the example..
Responsive Tables
Through the class .table-responsive the given table is responsive that means that the table will adjust by making scroller horizontally in the small devices or when the table has maximum columns.
Example 11 – Bootstrap 4 Responsive Table Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 Table System</title>
<!-- link the bootstrap online or through CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding: 10px;">
<h2>Responsive Table</h2>
<div class="table-responsive">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th>S No.</th>
<th>Name</th>
<th>Email</th>
<th>Contact</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>johnWilliam@gmail.com</td>
<td>657889007</td>
<td>54</td>
<td>Washington</td>
</tr>
<tr>
<td>2</td>
<td>Amelia</td>
<td>amelia12@gmail.com</td>
<td>34</td>
<td>New York</td>
</tr>
<tr>
<td>3</td>
<td>Ava</td>
<td>avaloria@gmail.com</td>
<td>6748349304</td>
<td>23</td>
<td>Washington</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Here we apply the class .table-responsive to the container inside this container the table tag is applied.
Posted in 
Tags: 
