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.

Bootstrap table

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 basic table
bootstrap basic table

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 striped rows
bootstrap 4 striped rows

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 table border
bootstrap 4 table border

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 hover row
bootstrap 4 hover row

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
bootstrap 4 dark table

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>
dark table in bootstrap 4
dark table in bootstrap 4

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 hover table row
bootstrap hover table row

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 table borderless
bootstrap 4 table borderless

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
bootstrap 4 create table

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 table thead color
bootstrap 4 table thead color

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 small table
bootstrap 4 small table

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 table caption
bootstrap 4 table caption

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.

bootstrap 4 responsive table
bootstrap 4 responsive table

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

bootstrap responsive table example
bootstrap responsive table example

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>
responsive table in bootstrap
responsive table in bootstrap

You may like following bootstrap tutorials:

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

>