Bootstrap table

In this bootstrap tutorial, we will discuss the bootstrap tale. How we can create a stylish table such as a hoverabled dark table, boarder less table, striped row table and etc with example.

Previously we are creating Tables using HTML with row and columns. But the Bootstrap 4 provides some of the predefined class for tables. So that we can create a responsive and styled table very easily with very less time.

If you are new to bootstrap, check out Bootstrap tutorial.

Table of Contents

We will start our Bootstrap tutorial with a very basic table which is having one header 7 columns and 4 rows.

Inside a container class first I have added a table class. For table heading purpose I have added <thead> tag. Inside the <thead> added <tr> then added 7 <th> for heading purpose. The table item can be added inside <td> which is present inside <tr>. The <tbody> tag contains <tr>.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap Basic Table Example</h2>      
  <table class="table">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Stripped Row Table

To Create a Bootstrap 4 Stripped row table we need to add “table-striped” class with the base class table.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Stripped Row Table</h2>      
 <table class="table table-striped">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Bordered Table

Using Bootstrap 4 we can create Bordered table using “table-bordered” class bootstrap provided. We need to write with the base class table.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Borderd Table</h2>      
 <table class="table table-bordered">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Hover Row Border Table

For Hover row table we need to add table-hover with table base class. Here I have added the border class(table-bordered) inside table class.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Hover Rows with Border</h2>
  <table class="table table-hover table-bordered">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Dark or Black Table

Using the “table-dark” class we can create a dark table in bootstrap. Like other class this class also we need to add in the table base class.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Dark Table</h2>
  <table class="table table-dark">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Dark Table With Striped

Bootstrap 4 we can create a dark table with stripped using table-striped and table-dark class with table base class.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Dark Table With Striped</h2>
  <table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Hover Row Dark Table

For Bootstrap 4 Hover Row Dark table we need to add “table-dark table-hover” class inside the table base class.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Hover Row Dark Table</h2>
 <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Border-Less table

To create a borderless table in bootstrap we need to add “table-borderless” class with table base class.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap4 Borderless Table</h2>
 <table class="table table-borderless">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 create table using contextual classes

We can create different color Bootstrap table using different contextual classes bootstrap provides.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Create Bootstrap 4 table using Contectual Classes</h2>
<table class="table table-bordered">
    <thead>
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr class="table-warning">
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr class="table-info">
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr class="table-danger">
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      <tr class="table-success">
        <td>5</td>
        <td>Tablet</td>
        <td>7000</td>
        <td>Pink</td>
        <td>Good</td>
        <td>Electronics</td>
        <td>Lenovo</td>
      </tr>
      <tr class="table-light">
        <td>6</td>
        <td>LaptopBag</td>
        <td>1200</td>
        <td>Black</td>
        <td>Good</td>
        <td>Bag and luggage</td>
        <td>Sky</td>
      </tr>
      <tr class="table-active">
        <td>7</td>
        <td>Jacket</td>
        <td>5000</td>
        <td>Grey</td>
        <td>VeryGood</td>
        <td>Clothes</td>
        <td>Zara</td>
      </tr>
     <tr class="table-primary">
        <td>8</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>9</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
       <tr class="table-secondary">
        <td>10</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Create Table With header color

To give the header color in Bootstrap 4 table we need to add “thead-dark” class inside <thead>tag.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap 4 table with head color</h2>
<table class="table table-bordered">
    <thead class="thead-dark">
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr >
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr >
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr >
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      <tr >
        <td>5</td>
        <td>Tablet</td>
        <td>7000</td>
        <td>Pink</td>
        <td>Good</td>
        <td>Electronics</td>
        <td>Lenovo</td>
      </tr>
      <tr >
        <td>6</td>
        <td>LaptopBag</td>
        <td>1200</td>
        <td>Black</td>
        <td>Good</td>
        <td>Bag and luggage</td>
        <td>Sky</td>
      </tr>
      <tr >
        <td>7</td>
        <td>Jacket</td>
        <td>5000</td>
        <td>Grey</td>
        <td>VeryGood</td>
        <td>Clothes</td>
        <td>Zara</td>
      </tr>
     <tr >
        <td>8</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
       <tr >
        <td>10</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Create Small Table

In Bootstrap 4 to create a small table, we need to use “table-sm” class with a table base class. Here I have also added “table-bordered” class for table border purpose.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap 4 Small Table</h2>
<table class="table table-bordered table-sm">
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
      </tr>
    </thead>
    <tbody>
      <tr >
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
      </tr>
      <tr >
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
      </tr>
      <tr >
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      <tr >
        <td>5</td>
        <td>Tablet</td>
        <td>7000</td>
        <td>Pink</td>
        <td>Good</td>
        <td>Electronics</td>
        <td>Lenovo</td>
      </tr>
      <tr >
        <td>6</td>
        <td>LaptopBag</td>
        <td>1200</td>
        <td>Black</td>
        <td>Good</td>
        <td>Bag and luggage</td>
        <td>Sky</td>
      </tr>
      <tr >
        <td>7</td>
        <td>Jacket</td>
        <td>5000</td>
        <td>Grey</td>
        <td>VeryGood</td>
        <td>Clothes</td>
        <td>Zara</td>
      </tr>
     <tr >
        <td>8</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
       <tr >
        <td>10</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
      </tr>
      
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Add Caption for Table

We can add the caption in our Bootstrap 4 table using the <Caption> tag.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap 4 Add Caption in Table</h2>

    <table class="table table-bordered">
    <caption>Product Details List</caption>
 
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        
        <th>ProductNumber</th>
        <th>Stock</th>
        
      </tr>
    </thead>
    <tbody>
      <tr >
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
        
        <td>LPG100</td>
        <td>Out of stock</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
        
        <td>TVS100</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
        
        <td>TVE100</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
        
        <td>Mb600</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>5</td>
        <td>Tablet</td>
        <td>7000</td>
        <td>Pink</td>
        <td>Good</td>
        <td>Electronics</td>
        <td>Lenovo</td>
        
        <td>TBE</td>
        <td>OutOfStock</td>
      </tr>
      <tr >
        <td>6</td>
        <td>LaptopBag</td>
        <td>1200</td>
        <td>Black</td>
        <td>Good</td>
        <td>Bag and luggage</td>
        <td>Sky</td>
        
        <td>BGS003</td>
        <td>Available</td>
      </tr>
      
    </tbody>
  </table>
</div>
</body>
</html>

Bootstrap 4 Create Responsive Table

We can create a responsive table in bootstrap using .table-responsive class to make out table scrollable. So that our table will fit for the small device also.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap 4 Responsive Table</h2>
<div class="table-responsive">
    <table class="table table-bordered">
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        <th>Description</th>
        <th>ProductNumber</th>
        <th>Stock</th>
        
      </tr>
    </thead>
    <tbody>
      <tr >
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
        <td>The product has placed a very good position in market</td>
        <td>LPG100</td>
        <td>Out of stock</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>TVS100</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>TVE100</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>Mb600</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>5</td>
        <td>Tablet</td>
        <td>7000</td>
        <td>Pink</td>
        <td>Good</td>
        <td>Electronics</td>
        <td>Lenovo</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>TBE</td>
        <td>OutOfStock</td>
      </tr>
      <tr >
        <td>6</td>
        <td>LaptopBag</td>
        <td>1200</td>
        <td>Black</td>
        <td>Good</td>
        <td>Bag and luggage</td>
        <td>Sky</td>
        <td>Now IT has 30% discount in market</td>
        <td>BGS003</td>
        <td>Available</td>
      </tr>
      
    </tbody>
  </table>
</div>
</body>
</html>

When we have opened our Bootstrap 4 responsive table in large system whose screen width is more than 992px the scrollable option is not coming.

But in the small system whose screen width less than 992px the scrollable option will come.

In the Bootstrap 4 table, we can add the breakpoint.

Predefined CLass For BreakPOint	Screen Width
table-responsive-sm	<576 px
table-responsive-md	<768 px
table-responsive-lg	<992 px
table-responsive-xl	<1200 px

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2 style=color:red>Bootstrap 4 Responsive Table</h2>
<div class="table-responsive-sm"> 
    <table class="table table-bordered">
      <tr>
        <th>SLNo</th>
        <th>ProductName</th>
        <th>Price</th>
        <th>Color</th>
        <th>Review</th>
        <th>Categories</th>
        <th>Brand</th>
        <th>Description</th>
        <th>ProductNumber</th>
        <th>Stock</th>
        
      </tr>
    </thead>
    <tbody>
      <tr >
        <td>1</td>
        <td>Laptop</td>
        <td>70000</td>
        <td>Blue</td>
        <td>Very Good</td>
        <td>Electronics</td>
        <td>LG</td>
        <td>The product has placed a very good position in market</td>
        <td>LPG100</td>
        <td>Out of stock</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tv</td>
        <td>100000</td>
        <td>Silver</td>
        <td>Average</td>
        <td>Electronics</td>
        <td>Sony</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>TVS100</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>3</td>
        <td>Tv</td>
        <td>30000</td>
        <td>black</td>
        <td>verygood</td>
        <td>Electronics</td>
        <td>Panasonics</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>TVE100</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>4</td>
        <td>Mobile</td>
        <td>10000</td>
        <td>Red</td>
        <td>VeryGood</td>
        <td>Electronics</td>
        <td>Samsung</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>Mb600</td>
        <td>Available</td>
      </tr>
      <tr >
        <td>5</td>
        <td>Tablet</td>
        <td>7000</td>
        <td>Pink</td>
        <td>Good</td>
        <td>Electronics</td>
        <td>Lenovo</td>
        <td>You should try the product once. Now IT has 50% discount in market</td>
        <td>TBE</td>
        <td>OutOfStock</td>
      </tr>
      <tr >
        <td>6</td>
        <td>LaptopBag</td>
        <td>1200</td>
        <td>Black</td>
        <td>Good</td>
        <td>Bag and luggage</td>
        <td>Sky</td>
        <td>Now IT has 30% discount in market</td>
        <td>BGS003</td>
        <td>Available</td>
      </tr>
      
    </tbody>
  </table>
</div>
</body>
</html>

You may like following bootstrap tutorials:

Bootstrap table
Bootstrap 4 Forms Designing and Carousel Example
SharePoint Online branding: Creating Accordion Widget or Collapsible panel with Bootstrap
Create Tabbed Menu using Bootstrap and HTML in SharePoint Online
bootstrap’s javascript requires jquery error in SharePoint online

In this Bootstrap 4 article, we were discussed different Bootstrap 4 table using different predefined class.

Bhawana Rathore

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”