Home >>Bootstrap Tutorial >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

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads