Admin dashboards are one of those things you build over and over in your career. Every client wants one. Every SaaS product needs one. Bootstrap 5 is not the most exciting framework, but it is reliable, well-documented, and gets the job done quickly.
Here is how I structure them.
The basic layout
A typical admin dashboard has three parts: a sidebar for navigation, a top bar for user info and actions, and a main content area. Bootstrap's flexbox utilities make this easy.
<div class="d-flex" style="min-height: 100vh;">
<!-- Sidebar -->
<nav id="sidebar" class="bg-dark text-white d-flex flex-column" style="width: 260px; min-height: 100vh;">
<div class="p-4">
<h5 class="text-white mb-4">Admin Panel</h5>
<ul class="nav flex-column gap-1">
<li><a href="/dashboard" class="nav-link text-white-50 px-3 py-2 rounded hover-bg">Dashboard</a></li>
<li><a href="/users" class="nav-link text-white-50 px-3 py-2 rounded hover-bg">Users</a></li>
<li><a href="/orders" class="nav-link text-white-50 px-3 py-2 rounded hover-bg">Orders</a></li>
<li><a href="/settings" class="nav-link text-white-50 px-3 py-2 rounded hover-bg">Settings</a></li>
</ul>
</div>
</nav>
<!-- Main area -->
<div class="flex-grow-1 bg-light">
<!-- Top bar -->
<header class="bg-white border-bottom px-4 py-3 d-flex justify-content-between align-items-center">
<h6 class="mb-0">Dashboard</h6>
<div class="d-flex align-items-center gap-3">
<span class="text-muted small">John Smith</span>
<a href="/logout" class="btn btn-sm btn-outline-secondary">Logout</a>
</div>
</header>
<!-- Content -->
<main class="p-4">
<!-- Your content here -->
</main>
</div>
</div>Stats cards
Every dashboard needs summary cards at the top. Here is a clean pattern:
<div class="row g-3 mb-4">
<div class="col-sm-6 col-xl-3">
<div class="card border-0 shadow-sm">
<div class="card-body d-flex justify-content-between align-items-center">
<div>
<p class="text-muted small mb-1">Total Users</p>
<h3 class="mb-0 fw-bold">1,234</h3>
<small class="text-success">+12% this month</small>
</div>
<div class="bg-primary bg-opacity-10 rounded-3 p-3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="#0d6efd" stroke-width="2" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg>
</div>
</div>
</div>
</div>
<!-- Repeat for other stats -->
</div>Making it work on mobile
On small screens, the sidebar should collapse. Bootstrap's offcanvas component handles this:
<!-- Mobile toggle button -->
<button class="btn btn-dark d-lg-none me-3"
data-bs-toggle="offcanvas"
data-bs-target="#mobileSidebar">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button>
<!-- Offcanvas sidebar for mobile -->
<div class="offcanvas offcanvas-start bg-dark text-white" id="mobileSidebar">
<div class="offcanvas-header">
<h5 class="offcanvas-title text-white">Admin Panel</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<!-- Same nav links as desktop sidebar -->
</div>
</div>A tip about active states
Highlight the current page in the sidebar. In Laravel Blade:
<a href="/users"
class="nav-link px-3 py-2 rounded {{ request()->is('users*') ? 'bg-primary text-white' : 'text-white-50' }}">
Users
</a>Bootstrap 5 is not glamorous, but it is practical. You can build a clean, functional admin dashboard in a few hours. Add Chart.js for graphs and DataTables for sortable tables and you have everything most clients need.
