Bootstrap
Tables
Bootstrap offer table designing by using different classes to style them.
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.only .table class is used to styling a table.
Bootstrap offer table designing by using different classes to style them.
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.only .table class is used to styling a table.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7 /css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>
Bootstrap
Basic Table</h2>
<table
class="table">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output
Bootstrap Basic Table
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
Bootstrap
Striped Rows
The ".table-striped" class is used to add zebra-stripes to a table.
Example
The ".table-striped" class is used to add zebra-stripes to a table.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>
Bootstrap
Striped Table</h2>
<table
class="table
table-striped">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output :
Bootstrap Striped Table
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
Bootstrap Bordered
The ".table-bordered" class is used to add borders on all sides of the table and all cells.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>Bootstrap
Bordered Table</h2>
<table
class="table
table-striped table-bordered">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Bootstrap Bordered Table
Name
Age
Sex
John
12
Male
Gomes
18
Female
Brock
22
Male
Bootstrap Bordered Table
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
Bootstrap Hover rows
".table-hover" class is used to enable a hover state on table rows.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>
Bootstrap
Basic Table</h2>
<table
class="table
table-striped table-bordered table-hover">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
Bootstrap Hover rows
Name
Age
Sex
John
12
Male
Gomes
18
Female
Brock
22
Male
Bootstrap Hover rows
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
Condensed Table
".table-condensed"
class makes a table more compact by cutting cell padding in half.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>
Bootstrap
Condensed Table</h2>
<table
class="table
table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output :
Bootstrap Condensed Table
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
Contextual Classes
Contextual Classes color a table row.There are mainly 5 contextual class
- .active
- .success
- .info
- .warning
- .danger
Example
Output :
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>
Bootstrap
Condensed Table</h2>
<table
class="table
table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr
class="active">
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr
class="success">
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr
class="info">
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
<tr
class="warning">
<td>
Gayatri
</td>
<td>
22
</td>
<td>
Female
</td>
</tr>
<tr
class="danger">
<td>
Nathan
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Bootstrap Condensed Table
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
| Gayatri | 22 | Female |
| Nathan | 22 | Male |
Bootstrap 4 added another 4 Contextual class
- active
- secondary
- light
- dark
Responsive Tables
By addeding class ".table-responsive" class, you will make the table scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="table-responsive">
<table
class="table
">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr
>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr
>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr
>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
<tr
>
<td>
Gayatri
</td>
<td>
22
</td>
<td>
Female
</td>
</tr>
<tr
>
<td>
Nathan
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
| Gayatri | 22 | Female |
| Nathan | 22 | Male |
Inverse tables
Bootsrap 4 offer inverse tables Class.".table-inverse" change the color of the table.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<div
class="table-inverse">
<table
class="table
">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
<th>
Sex
</th>
</tr>
</thead>
<tbody>
<tr
>
<td>
John
</td>
<td>
12
</td>
<td>
Male
</td>
</tr>
<tr
>
<td>
Gomes
</td>
<td>
18
</td>
<td>
Female
</td>
</tr>
<tr
>
<td>
Brock
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
<tr
>
<td>
Gayatri
</td>
<td>
22
</td>
<td>
Female
</td>
</tr>
<tr
>
<td>
Nathan
</td>
<td>
22
</td>
<td>
Male
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
| Name | Age | Sex |
|---|---|---|
| John | 12 | Male |
| Gomes | 18 | Female |
| Brock | 22 | Male |
| Gayatri | 22 | Female |
| Nathan | 22 | Male |
