How to use Bootstrap Theme In HTML
In this approach, we are using the Bootstrap Morph theme from Bootswatch to style the HTML table. The code includes the necessary Bootstrap classes for table formatting, such as table-hover for hover effects, along with specific classes like table-warning, table-success, and table-danger for row coloring. This makes a visually appealing and well-organized table layout with a themed design.
Example: The below example uses Bootstrap Theme to Style HTML Tables Using Bootstrap.
<!DOCTYPE html>
<html>
<head>
<title>Example 4</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.3/morph/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2 class="text-center my-4" style="color: green;">
Styling HTML table using Bootstrap
</h2>
<h3 class="text-center my-4">
Using Bootstrap Theme
</h3>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Subject</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<th scope="row">1</th>
<td>GFG1</td>
<td>HTML</td>
</tr>
<tr>
<th scope="row">2</th>
<td>GFG2</td>
<td>CSS</td>
</tr>
<tr class="table-success">
<th scope="row">3</th>
<td>GFG3</td>
<td>JavaScript</td>
</tr>
<tr class="table-danger">
<th scope="row">4</th>
<td>GFG4</td>
<td>Python</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Output:
How to Style HTML Tables using Bootstrap ?
In Bootstrap, the styling of tables can be done to enhance their appearance and layout, using classes like table, table-hover, table-bordered, and more. These classes provide options for responsive design, color schemes, borders, and hover effects, making tables visually appealing and user-friendly.
The below approaches can be used to style HTML tables using Bootstrap:
Table of Content
- Using Table Utility Classes
- Using Animation and Bootstrap Hovering Classes
- Using Bootstrap Table Plugin
- Using Bootstrap Theme