Bootstrap

champak
Bootstrap
₹2,000.00 ₹300.00
  • 23 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

Bootstrap Tables

The table class adds basic styling to the html table


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tables</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Start with the table class that adds basic styling to the table</h2>

<table class="table">
<thead>
<tr>
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recursion Sutras</td>
<td>E Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Recursion Sutras</td>
<td>Paper Book</td>
<td>Recursion</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Striped Tables table-striped


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Striped Tables</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Striped Tables</h2>

<table class="table-striped">
<thead>
<tr>
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recursion Sutras</td>
<td>E Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Recursion Sutras</td>
<td>Paper Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming </td>
<td>E Book</td>
<td>Object Oriented Programming</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming</td>
<td>Paper Book</td>
<td>Object Oriented Programming</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Striped and Bordered Tables


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Striped and Bordered Tables</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Striped and Bordered Tables</h2>

<table class="table-striped table-bordered">
<thead>
<tr>
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recursion Sutras</td>
<td>E Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Recursion Sutras</td>
<td>Paper Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming </td>
<td>E Book</td>
<td>Object Oriented Programming</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming</td>
<td>Paper Book</td>
<td>Object Oriented Programming</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Hover Tables  table-hover


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Striped and Bordered Tables</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Bordered and Hovered Tables</h2>

<table class="table-bordered table-hover">
<thead>
<tr>
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recursion Sutras</td>
<td>E Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Recursion Sutras</td>
<td>Paper Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming </td>
<td>E Book</td>
<td>Object Oriented Programming</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming</td>
<td>Paper Book</td>
<td>Object Oriented Programming</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Moving the mouse over the rows will create a shadow over the current row.

Other classes
.table-dark, .table-borderless, .
table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background

Tables with Header Rows


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Dark Tables</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Tables with header rows</h2>

<table class="table ">
<thead>
<tr class=" thead-dark">
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recursion Sutras</td>
<td>E Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Recursion Sutras</td>
<td>Paper Book</td>
<td>Recursion</td>
</tr>
<tr class=" thead-light">
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
<tr>
<td>Experiments in Object Oriented Programming </td>
<td>E Book</td>
<td>Object Oriented Programming</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming</td>
<td>Paper Book</td>
<td>Object Oriented Programming</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Small Table table-sm


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Dark Tables</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.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Tables Small Table table-sm</h2>

<table class="table-sm">
<thead>
<tr class=" thead-dark">
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<tr>
<td>Recursion Sutras</td>
<td>E Book</td>
<td>Recursion</td>
</tr>
<tr>
<td>Recursion Sutras</td>
<td>Paper Book</td>
<td>Recursion</td>
</tr>
<tr class=" thead-light">
<th>Book</th>
<th>Format</th>
<th>Subject</th>
</tr>
<tr>
<td>Experiments in Object Oriented Programming </td>
<td>E Book</td>
<td>Object Oriented Programming</td>
</tr>
<tr>
<td>Experiments in Object Oriented Programming</td>
<td>Paper Book</td>
<td>Object Oriented Programming</td>
</tr>
</tbody>
</table>
</div>

</body>
</html>

Reduces internal spacing by half

 

And finally we have the responsive classes.

.table-responsive will add scrollbars on screens less than 992 pixels.

.table-responsive-sm < 576px,.table-responsive-md < 768px,.table-responsive-lg < 992px,

table-responsive-xl < 1200px

 

Try this example


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Responsive Table</h2>
<p> When viewing on anything larger than 992px, there is no difference:</p>

<div class="">
<table class="table table-bordered table-responsive">
<thead>
<tr>
<th>Book Name</th>
<th>Book Price</th>
<th>Book Subject</th>
<th>Book Topics</th>
<th>Book Author</th>
<th>No of Pages</th>
<th>Edition</th>
<th>Book Name</th>
<th>Book Price</th>
<th>Book Subject</th>
<th>Book Topics</th>
<th>Book Author</th>
<th>No of Pages</th>
<th>Edition</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Recursion Sutras</td>
<td>199</td>
<td>Recursion</td>
<td>Recursion</td>
<td>Champak Roy</td>
<td>Eighty Three</td>
<td>One</td>
<td>The Recursion Sutras</td>
<td>199</td>
<td>Recursion</td>
<td>Recursion</td>
<td>Champak Roy</td>
<td>Eighty Three</td>
<td>One</td>
</tr>
</tbody>
</table>
</div>
</div>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *