In this tutorial, we will create simple bootstrap 5 datatables, responsive bootstrap 5 datatables, bootstrap 5 datatables with hover able rows and dark color rows example in bootstrap 5.
Tool Use
Bootstrap 5 CDN
Jquery CDN
DataTables CDN
Example 1
Simple datatables with bootstrap 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Simple Datatable Example</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- bootstrap5 dataTables css cdn -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
/>
</head>
<body>
<div class="container mt-4">
<table
id="datatable"
class="table"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>createdAt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon doe</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>2</td>
<td>smae</td>
<td>[email protected]</td>
<td>10/11/22</td>
</tr>
<tr>
<td>3</td>
<td>Jhon doe3</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>4</td>
<td>Jhon doe4</td>
<td>[email protected]</td>
<td>10/10/24</td>
</tr>
<tr>
<td>5</td>
<td>Jhon doe5</td>
<td>[email protected]</td>
<td>10/10/21</td>
</tr>
</tbody>
</table>
</div>
<!-- bootstrap5 dataTables js cdn -->
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#datatable').DataTable();
});
</script>
</body>
</html>
Simple datatables with bootstrap 5
Example 2 (recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Simple Datatable Example</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- bootstrap5 dataTables css cdn -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
/>
</head>
<body>
<div class="container mt-4">
<table
id="datatable"
class="table table-striped"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>createdAt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon doe</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>2</td>
<td>smae</td>
<td>[email protected]</td>
<td>10/11/22</td>
</tr>
<tr>
<td>3</td>
<td>Jhon doe3</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>4</td>
<td>Jhon doe4</td>
<td>[email protected]</td>
<td>10/10/24</td>
</tr>
<tr>
<td>5</td>
<td>Jhon doe5</td>
<td>[email protected]</td>
<td>10/10/21</td>
</tr>
</tbody>
</table>
</div>
<!-- bootstrap5 dataTables js cdn -->
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#datatable').DataTable();
});
</script>
</body>
</html>
Example 3
Bootstrap 5 dark black rows datatables
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Black Color Datatable Example</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- bootstrap5 dataTables css cdn -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
/>
</head>
<body>
<div class="container mt-4">
<table
id="datatable"
class="table table-dark table-striped"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>createdAt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon doe</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>2</td>
<td>smae</td>
<td>[email protected]</td>
<td>10/11/22</td>
</tr>
<tr>
<td>3</td>
<td>Jhon doe3</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>4</td>
<td>Jhon doe4</td>
<td>[email protected]</td>
<td>10/10/24</td>
</tr>
<tr>
<td>5</td>
<td>Jhon doe5</td>
<td>[email protected]</td>
<td>10/10/21</td>
</tr>
</tbody>
</table>
</div>
<!-- bootstrap5 dataTables js cdn -->
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#datatable').DataTable();
});
</script>
</body>
</html>
Bootstrap 5 dark black rows datatables
Example 4
Bootstrap 5 hover able rows datatables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bootstrap 5 Hoverable rows Datatable Example</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<!-- bootstrap5 dataTables css cdn -->
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css"
/>
</head>
<body>
<div class="container mt-4">
<table
id="datatable"
class="table table-dark table-hover table-striped"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>createdAt</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon doe</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>2</td>
<td>smae</td>
<td>[email protected]</td>
<td>10/11/22</td>
</tr>
<tr>
<td>3</td>
<td>Jhon doe3</td>
<td>[email protected]</td>
<td>10/10/22</td>
</tr>
<tr>
<td>4</td>
<td>Jhon doe4</td>
<td>[email protected]</td>
<td>10/10/24</td>
</tr>
<tr>
<td>5</td>
<td>Jhon doe5</td>
<td>[email protected]</td>
<td>10/10/21</td>
</tr>
</tbody>
</table>
</div>
<!-- bootstrap5 dataTables js cdn -->
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#datatable').DataTable();
});
</script>
</body>
</html>
