saftutorials.com
Bootstrap Table

Bootstrap has the responsive table. If you want to make a responsive table you can use Bootstrap Table class. There are many types have Bootstrap Table Class like .table, .table-hover, .table-bordered etc.


Basic Bootstrap Table

Bootstrap default responsive table class is .table If you want to make a responsive table you can use first .table class.

NameAddressCityCountry
JohnN/AN/AUSA
Jakob

N/A

N/A
USA
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>


Bootstrap Striped rows Table

Use .table-striped class to add zebra-striping to any table row within <tbody>.
NameAddressCityCountry
JohnN/AN/AUSA

Jakob

N/A

N/A
USA

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>



Bootstrap Bordered table

Add .table-bordered class for borders on all sides of the table and cells.
NameAddressCityCountry
JohnN/AN/AUSA
Jakob

N/A

N/A
USA
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>


Bootstrap Table Hover rows

Add .table-hover class to enable a hover state on table rows within a <tbody>.
NameAddressCityCountry
JohnN/AN/AUSA
Jakob

N/A

N/A
USA
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>

Bootstrap Condensed table

Add .table-condensed class to make tables more compact by cutting cell padding in half.
NameAddressCityCountry
JohnN/AN/AUSA
Jakob

N/A

N/A
USA
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table table-condensed">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>


Bootstrap Table Contextual classes

Use contextual classes to color table rows or individual cells.

ClassDescription
.activeApplies the hover color to a particular row or cell
.successIndicates a successful or positive action
.infoIndicates a neutral informative change or action
.warningIndicates a warning that might need attention
.dangerIndicates a dangerous or potentially negative action


NameAddressCityCountry
JohnN/AN/AUSA
Jakob

N/A

N/A
USA
Adam

N/A

N/A
USA
Prince

N/A

N/A
USA
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table table-responsive">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr class="info">
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr class="success">
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>


Bootstrap Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (< 768px). When viewing larger than 768px wide, you will not see any difference in these tables.
NameAddressCityCountry
JohnN/AN/AUSA
Jakob

N/A

N/A
USA
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table class="table table-responsive">
<thead>
<tr>
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Country</td>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
<tr>
<td>John</td>
<td>N/A</td>
<td>N/A</td>
<td>USA</td>
</tr>
</tbody>
</table>
</body>
</html>


Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic