Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Basic Table in Bootstrap
In general, table is a structured representation of data which is organized into rows and columns. Tables are commonly used in various contexts such as database systems, spreadsheets, and HTML websites.
In HTML, if we create a basic table, it just displays its records without any borders or cell dividers. Whereas in Bootstrap, a basic table has a light padding and horizontal dividers. Bootstrap provides a collection of CSS classes for creating visually appealing websites.
In this article, we are going to discuss all the different classes that can be used to create and style the table in Bootstrap with suitable examples.
Bootstrap Basic Table
We can create a basic bootstrap table using the ".table" class. It has only light padding and horizontal dividers.
Example
In the following example, we are creating a basic Bootstrap table using the ".table" class inside the table tag.
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
When we execute the query above, the output shows a basic Bootstrap table ?
Striped Rows
Using the ".table-striped" class, we can add zebra stripes to a table.
Example
In the example below, we are using the ".table-striped" class to add zebra stripes to the rows of the table.
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Striped Table</h2>
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
On executing the given query, the output is displayed as follows ?
Bordered Table
The ".table-bordered" class can be used to add borders for the entire table and cells ?
Example
Here, we are using the ".table-bordered" class to add borders on all sides of the table and cells ?
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
The output for the query above is produced as given below ?
Hover table rows
The ".table-hover" class is used to add a hover effect on table rows. Whenever we mouseover on a table row, it adds a grey background color.
Example
In the example below, we are using the ".table-hover" class on the table rows. So, whenever we mouse-over the table rows, a grey background will be added.
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Bordered Table</h2>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
If we compile and run the query, the result is produced as follows ?
Condensed table
The ".table-condensed" class will make the table more compact by cutting the cell padding in half.
Example
Here, we are using the ".table-condensed" class in the table tag.
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Condensed Table</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr>
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr>
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
Contextual Classes
In Bootstrap, contextual classes are used to add color to the table rows or table data. Following are the contextual classes that can be used ?
.active ? Adds the hover color (grey) to a table row or table cell.
.success ? This color indicates a successful or positive action.
.info ? This color indicates a neutral informative change or action.
.warning ? This color indicates a warning.
.danger ? This color indicates a dangerous or potentially negative action.
Example
In the following example, we are using all the above-mentioned contextual classes on the table rows ?
<!DOCTYPE html>
<html>
<head>
<title>Tables in Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Bootstrap Contextual Classes</h2>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Peter</td>
<td>Parker</td>
<td>25</td>
<td>12345</td>
</tr>
<tr class="danger">
<td>Dwayne</td>
<td>Johnson</td>
<td>49</td>
<td>52141</td>
</tr>
<tr class="info">
<td>Scott</td>
<td>Boland</td>
<td>32</td>
<td>14523</td>
</tr>
<tr class="warning">
<td>James</td>
<td>Anderson</td>
<td>51</td>
<td>53124</td>
</tr>
<tr class="active">
<td>Stuart</td>
<td>Broad</td>
<td>42</td>
<td>34241</td>
</tr>
</tbody>
</table>
</body>
</html>
Output
Let us compile and run the query, to produce the following result ?
156 Views
