Core Code
Core Code Modern Dev Handbook

Responsive Dashboard Layout

Use breakpoints to build responsive dashboard grids.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container py-5">

<div class="row g-3">

<div class="col-12 col-md-6 col-xl-3">

<div class="bg-primary text-white p-4">
Widget
</div>

</div>

<div class="col-12 col-md-6 col-xl-3">

<div class="bg-success text-white p-4">
Widget
</div>

</div>

<div class="col-12 col-md-6 col-xl-3">

<div class="bg-warning text-dark p-4">
Widget
</div>

</div>

<div class="col-12 col-md-6 col-xl-3">

<div class="bg-dark text-white p-4">
Widget
</div>

</div>

</div>

</div>

</body>
</html>

More BS5 Breakpoints Table Examples (7)

example Breakpoint Reference Table open example example Responsive Grid Columns open example example Responsive Display open example example Container Breakpoints open example example Responsive Navbar open example example Responsive Text Alignment open example example Responsive Spacing open example