Bootstrap Basic Table:
The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Basic Table Example</h1>
<table class="table">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Striped Rows Table:
The .table-striped class is used to add zebra-stripes to a table:
about:blank
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Striped Table Example</h1>
<table class="table table-striped">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Bordered table:
The .table-bordered class is used to add borders on all sides of the table and cells:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Bordered Table Example</h1>
<table class="table table-striped table-bordered">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>Bootstrap Hover rows Table:
The .table-hover class is used to enable a hover state on table rows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Hower rows Table Example</h1>
<table class="table table-hover">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Condensed table:
The .table-condensed class is used to make a table more compact by cutting cell padding in half:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Condensed Table Example</h1>
<table class="table table-condensed">
<tr><th>Id</th><th>Name</th><th>Age</th></tr>
<tr><td>101</td><td>Rahul</td><td>23</td></tr>
<tr><td>102</td><td>Umesh</td><td>22</td></tr>
<tr><td>103</td><td>Max</td><td>29</td></tr>
<tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Bootstrap Contextual classes:.
Contextual classes are used to color table rows (<tr>) or table cells (<td>):
Following are the different contextual classes:
| Class | Description |
|---|---|
| .active | It is used to apply the hover color to the table row or table cell |
| .success | It indicates a successful or positive action |
| .info | It indicates a neutral informative change or action |
| .warning | It specifies a warning that might need attention |
| .danger | It indicates a dangerous or potentially negative action |
Example:
about:blank
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Contextual classes</h1>
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Responsive tables:
The .table-responsive class is used to create a responsive table. You can open the responsible table even on small devices (under 768px). Then the table will be scrolled horizontally. Displays larger than 768px wide, there is no difference.
See this example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Job</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<h1>Contextual classes</h1>
<div class="table-responsive">
<table class="table">
<tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
<tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
<tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
<tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
<tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html> Some newly added tables in Bootstrap 4:
Black/Dark Table
The .table-dark class is used to add a black background to the table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Black/Dark Table</h2>
<p>The .table-dark class is used to add a black background to the table:</p>
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> Dark Striped Table
Combine the .table-dark class and .table-striped class to create a dark, striped table:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dark Striped Table</h2>
<p>Combine the .table-dark class and .table-striped class to create a dark, striped table: </p>
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Hoverable Dark Table
The .table-hover class is used to add a hover effect (grey background color) on table rows:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class is used to add a hover effect (grey background color) on table rows:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> Bootstrap 4 Contextual Table
Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells (<td>).
The classes that can be used are:
about:blank
.table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
Let’s take an example to see the usage of all contextual classes in a Bootstrap 4 table.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Contextual Classes Example</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>A</td>
<td>[email protected]</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>B</td>
<td>[email protected]</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>C</td>
<td>[email protected]</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>D</td>
<td>[email protected]</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>E</td>
<td>[email protected]</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>F</td>
<td>[email protected]</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>G</td>
<td>[email protected]</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>H</td>
<td>[email protected]</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>I</td>
<td>[email protected]</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>K</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> Table Head Colors
You can change the background color of the table header by using .thead-dark class to add a black background to table headers, and the .thead-light class to add a grey background to table headers.
about:blank
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table Head Colors</h2>
<table class="table">
<thead class="thead-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> Small Table
The .table-sm class is used to make the table smaller by cutting cell padding in half.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Small Table Example</h2>
<p>The .table-sm class is used to make the table smaller by cutting cell padding in half.</p>
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ajeet</td>
<td>Kumar</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mahesh</td>
<td>Sharma</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Sonoo</td>
<td>Jaiswal</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Leave a Reply