Home >>Bootstrap Tutorial >Bootstrap Table

Bootstrap Table

Bootstrap Table

Bootstrap table are used to provide data in grid manner like rows and columns. It provides various series of classes like making rows hoverable, adding or removing borders, rows striped effect, etc. to apply various types of classes to style them in a quick and ease way. To create table you need to add .table class after that add various classes of bootstrap table. Bootstrap also provides class .table-responsive for making the responsive table.

Let's take an example of table:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table ">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Striped Rows

When you add a class .table-striped in a table, it provides you zebra-stripes to a table:

Let's take an example of table striped rows:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Bordered Table

When you add a class .table-bordered in a table, it adds borders on all sides of table and cells.

Let's take an example of bordered table:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Dark Table

When you add a class .table-dark in a table, it provide you a black background to a table.

Let's take an example of dark table:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Dark striped Table

When you add a class .table-striped and .table-dark, it provide you a black background and zebra-stripes to a table.

Let's take an example of Dark striped table:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-striped table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Hoverable Rows

When you add a class .table-hover, it provide you a hover effect of grey background color to table rows.

Let's take an example of hoverable table rows:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Dark Hoverable Row

When you add a class .table-hover and table-dark, it provide you a hover effect of grey background color to table rows and black background to the table.

Let's take an example of dark hoverable table:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]

Contextual classes

Contextual classes is used to make the table colorful. It provides you to put the colors in rows and cells individually. For this you can used these contextual classes in <tr> to the table:

.table-warning, .table-primary, .table-info, .table-success, .table-danger, .table-active, .table-light .table-secondary and .table-dark:

Let's take an example of contextual classes in a table:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table">
    <thead>
      <tr class="table-warning">
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-primary">
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-info ">
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr class="table-success">
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
	   <tr class="table-danger">
        <td>example</td>
        <td>X</td>
        <td>[email protected]</td>
      </tr>
	   <tr class="table-active">
        <td>example1</td>
        <td>Y</td>
        <td>[email protected]</td>
      </tr>
	   <tr class="table-light">
        <td>example2</td>
        <td>Z</td>
        <td>[email protected]</td>
      </tr>
	   <tr class="table-secondary">
        <td>example3</td>
        <td>A</td>
        <td>[email protected]</td>
      </tr>
	   <tr class="table-dark">
        <td>example4</td>
        <td>B</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]
example X [email protected]
example1 Y [email protected]
example2 Z [email protected]
example3 A [email protected]
example4 B [email protected]

Table Head colors

When you add a class .thead-dark, it provide you black background color to table headers and the .thead-light class provides you grey background color to the table headers.

Let's take an example of table head colors:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Table</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
 <table class="table table-bordered">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ronit</td>
        <td>singh</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh [email protected]
Johny kumar [email protected]
July prajapati [email protected]