Bootstrap 4 Tables: Basic Tables, Striped Rows, Hover Rows, and Responsive Tables
Sure, here's a detailed explanation of different types of tables in Bootstrap 4 with examples, properly indented with 4 spaces.
Basic Table
A basic table in Bootstrap 4 uses the .table class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<title>Basic Table</title>
</head>
<body>
<div class="container mt-5">
<h2>Basic Table</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th>2</th>
<td>Jane</td>
<td>Smith</td>
<td>@janesmith</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Striped Rows
To create a table with striped rows, use the .table-striped class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<title>Striped Rows Table</title>
</head>
<body>
<div class="container mt-5">
<h2>Striped Rows Table</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th>2</th>
<td>Jane</td>
<td>Smith</td>
<td>@janesmith</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hover Rows
To highlight rows on hover, use the .table-hover class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<title>Hover Rows Table</title>
</head>
<body>
<div class="container mt-5">
<h2>Hover Rows Table</h2>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th>2</th>
<td>Jane</td>
<td>Smith</td>
<td>@janesmith</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Responsive Table
To make a table responsive, wrap it in a .table-responsive class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<title>Responsive Table</title>
</head>
<body>
<div class="container mt-5">
<h2>Responsive Table</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>John</td>
<td>Doe</td>
<td>@johndoe</td>
</tr>
<tr>
<th>2</th>
<td>Jane</td>
<td>Smith</td>
<td>@janesmith</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
These examples cover basic tables, striped rows, hover rows, and responsive tables in Bootstrap 4, with proper indentation for clarity.
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.