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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

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>ronit@example.com</td>
      </tr>
      <tr class="table-info ">
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr class="table-success">
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
	   <tr class="table-danger">
        <td>example</td>
        <td>X</td>
        <td>example@example.com</td>
      </tr>
	   <tr class="table-active">
        <td>example1</td>
        <td>Y</td>
        <td>example1@example.com</td>
      </tr>
	   <tr class="table-light">
        <td>example2</td>
        <td>Z</td>
        <td>example2@example.com</td>
      </tr>
	   <tr class="table-secondary">
        <td>example3</td>
        <td>A</td>
        <td>example3@example.com</td>
      </tr>
	   <tr class="table-dark">
        <td>example4</td>
        <td>B</td>
        <td>example4@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com
example X example@example.com
example1 Y example1@example.com
example2 Z example2@example.com
example3 A example3@example.com
example4 B example4@example.com

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>ronit@example.com</td>
      </tr>
      <tr>
        <td>Johny</td>
        <td>kumar</td>
        <td>johny@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>prajapati</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
  </div>
</body>
</html>
Output:
Firstname Lastname Email
Ronit singh ronit@example.com
Johny kumar johny@example.com
July prajapati july@example.com

Popular Tutorials