bootstrap 3 table with border code example
Example 1: bootstrap table list
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Example 2: bootstrap 3 table
Bootstrap Basic Table
A basic Bootstrap table has a light padding and only horizontal dividers.
The .table class adds basic styling to a table
------------------------------------------------------------
Striped Rows
The .table-striped class adds zebra-stripes to a table
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells
------------------------------------------------------------
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table rows
------------------------------------------------------------
Condensed Table
The .table-condensed class makes a table more compact by cutting cell padding in half
------------------------------------------------------------
Contextual Classes
Contextual classes can be used to color table rows (<tr>) or table cells (<td>)
The contextual classes that can be used are:
Class Description
.active Applies the hover color to the table row or table cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action
------------------------------------------------------------
Responsive Tables
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference
Sample code
<!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/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bootstrap Table Example</h2>
<table class="table -----------"> // try by adding different table class at this place => ("-----------")
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ram</td>
<td>10</td>
</tr>
<tr>
<td>2</td>
<td>Shyam</td>
<td>12</td>
</tr>
<tr>
<td>3</td>
<td>Ramesh</td>
<td>13</td>
</tr>
<tr>
<td>4</td>
<td>Suresh</td>
<td>11</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Example 3: table class in bootstrap
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>