Bootstrap Tables provide pre-styled and responsive table components, enhancing the presentation of tabular data in web applications. They offer various features like striped rows, hover effects, and responsive behavior, streamlining the process of creating aesthetically pleasing and functional tables with minimal CSS customization.
Bootstrap Tables Types:
Simple table:
A Bootstrap simple table combines HTML table structure with Bootstrap styling, offering clean design, features like striped rows, hover effects, and responsiveness, perfect for displaying data in web applications.
Example: In this example we creates a Bootstrap table with headers and rows containing serial numbers, names, cities, and ages. Styling is applied with CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- Bootstrap table class -->
<table class="table">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Dark table:
A Bootstrap dark table is a table with dark background and light text, created by applying the table-dark class to the table element in Bootstrap.
Example: In this example we creates Bootstrap table with a dark theme, displaying serial numbers, names, cities, and ages. CSS styling is applied to the header and content sections.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- table, table-dark -->
<table class="table table-dark">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Heading appearance:
Bootstrap table head colors are applied using contextual classes like thead-dark or thead-light on the <thead> element to change the background color. For example, <thead class="thead-dark">.
Example: In this exmaple we generates two Bootstrap tables: one with a light header and the other with a dark header, displaying serial numbers, names, cities, and ages.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap | Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- table, thead-light -->
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
<!-- table, thead-dark -->
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Stripped rows:
A Bootstrap stripped rows table alternates background colors between rows, providing visual distinction. Apply the table-striped class to a Bootstrap table to enable this feature.
Example: In this example we generates two Bootstrap tables: one with striped rows and the other with both striped rows and a dark theme, displaying serial numbers, names, cities, and ages.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap | Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- table, table-stripped -->
<table class="table table-striped">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
<!-- table, table-stripped, table-dark -->
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Bordered table:
A Bootstrap bordered table adds borders around each cell of the table. Apply the table-bordered class to a Bootstrap table to enable this feature.
Example: In this example we creates two Bootstrap tables: one with bordered cells and the other with bordered cells and a dark theme, showing serial numbers, names, cities, and ages.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<title>Bootstrap Tables</title>
<style>
h1 {
color: green;
text-align: center;
}
div {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksForGeeks</h1>
<!-- table, table-bordered -->
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
<!-- table, table-bordered, table-dark -->
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">S. No.</th>
<th scope="col">Name</th>
<th scope="col">City</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Ajay</td>
<td>Patna</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Rahul</td>
<td>Chandigarh</td>
<td>17</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Parush</td>
<td>Kolkata</td>
<td>22</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Similar Reads
Bootstrap 5 Tables
Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Bootstrap 5 Tables:
2 min read
Bootstrap 4 | Tables
Bootstrap provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows stripped, adding or removing borders, making rows hoverable, etc. Bootstrap also provides classes for making tables responsive. Simple Table: The .t
9 min read
Bootstrap | Tables | Set-2
Bootstrap provides us a series of classes that can be used to apply various styling to tables such as changing the heading appearance, making the rows striped, adding or removing borders, and making rows hoverable. Bootstrap also provides classes for making tables responsive. Borderless table: To ma
7 min read
Bootstrap Examples
The following Bootstrap section contains a wide collection of Bootstrap examples. These examples are categorized based on the topics including basics, directives, functions, and many more. Each example may contain multiple approaches to solve the problem. Table of Content CustomizeLayoutContentForms
4 min read
Bootstrap 5 Small tables
Bootstrap 5 Small tables are used to create the small size of tables. These tables are just smaller versions of the normal tables. Bootstrap 5 Small tables Class: table-sm: By using this class we can convert a normal table into a smaller table by cutting all cell padding in half. Syntax: <table c
2 min read
Bootstrap 5 Table foot
Bootstrap 5 Table foot is used to create a section where we can calculate the whole column's sum. Like if we create a table that contains two columns one holding the product and another holding the value then the value part can be summed up. Bootstrap 5 Table foot Class: We do not require any class
2 min read
Bootstrap 5 Table SASS
Bootstrap 5 Table SASS can be used to change the default values provided for the table by customizing scss file.SASS variables of Table:$table-cell-padding-y: This variable provides the top and bottom padding of the table cell. By default, it is 0.5rem.$table-cell-padding-x: This variable provides t
7 min read
Bootstrap 5 Table head
Bootstrap 5 Table head class is used to set the thead elements' background color. Sometimes we need a table with a dark header for a better-suited situation. We can use these classes to change the background color of the thead section of a table. Bootstrap 5 Table head Classes: table-light: This cla
2 min read
Bootstrap 5 Reboot Tables
Bootstrap 5 Reboot Tables are designed to style captions, borders, alignment, and much more. Many more styles are provided by Bootstrap 5 Reboot Tables like padding / accented tables etc. Bootstrap 5 Reboot Tables Used Classes: There are no special classes for BootStrap 5 Reboot Tables. The classes
2 min read
Bootstrap 5 Table Variants
Bootstrap 5 Table Variants can be used to color the whole tables, table rows, or an individual cell of a table. Bootstrap 5 Table Variants Class: table-*: This class is used to color a table, its row, or a cell to bootstrap's pre-defined color. Syntax: <!-- Coloring whole table --> <table c
3 min read