Web Designer Wall

Snippets Admin

Bootstrap 5 Admin Dashboard with Activity Chart

An admin dashboard shell with an icon sidebar, summary stat cards and an interactive server-activity line chart with metric and status filters.

Bootstrap 5 No jQuery Jan 2020 1.7K views 

<section class="wdw-stage">
  <div class="container" style="max-width:1120px">
    <div class="wdw-card overflow-hidden dash" id="dash">
      <div class="d-flex flex-column flex-md-row">
        <nav class="dash-nav d-flex flex-md-column align-items-center gap-2 p-3" aria-label="Dashboard">
          <span class="wdw-icon bg-primary text-white mb-md-3" style="--bs-primary-bg-subtle:var(--bs-primary)" aria-hidden="true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.5S5 10 5 15a7 7 0 0014 0c0-5-7-12.500-7-12.500z"/></svg>
          </span>
          <a href="#" class="dash-link active" aria-label="Overview" aria-current="page" title="Overview"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8"/><path d="M5 10v10h14V10"/></svg></a>
          <a href="#" class="dash-link" aria-label="Schedule" title="Schedule"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M3 10h18M8 3v4M16 3v4"/></svg></a>
          <a href="#" class="dash-link" aria-label="Messages" title="Messages"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8 8 0 01-11.6 7.1L4 20l1-4.6A8 8 0 1121 12z"/></svg><span class="dash-dot"></span></a>
          <a href="#" class="dash-link ms-auto ms-md-0 mt-md-auto" aria-label="Settings" title="Settings"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg></a>
        </nav>
        <div class="flex-grow-1 p-3 p-md-4 min-w-0">
          <div class="d-flex flex-column flex-lg-row justify-content-between gap-3 mb-4">
            <div>
              <h1 class="wdw-heading h3 mb-1">Server activity</h1>
              <p class="wdw-muted small mb-0">May 11 – 16 · updated 2 min ago</p>
            </div>
            <div class="d-flex flex-wrap gap-2 align-items-start">
              <div class="dropdown">
                <button class="btn btn-sm btn-outline-secondary rounded-pill dropdown-toggle px-3" type="button" data-bs-toggle="dropdown" aria-expanded="false">Type: <strong data-type-label>Requests</strong></button>
                <ul class="dropdown-menu" data-type-menu>
                  <li><button class="dropdown-item active" type="button" data-metric="requests">Requests</button></li>
                  <li><button class="dropdown-item" type="button" data-metric="errors">Errors</button></li>
                  <li><button class="dropdown-item" type="button" data-metric="bandwidth">Bandwidth</button></li>
                </ul>
              </div>
              <div class="btn-group btn-group-sm" role="group" aria-label="Status filter" data-status-group>
                <input type="radio" class="btn-check" name="dstat" id="stAll" checked><label class="btn btn-outline-secondary rounded-start-pill px-3" for="stAll">All</label>
                <input type="radio" class="btn-check" name="dstat" id="stAct"><label class="btn btn-outline-secondary rounded-end-pill px-3" for="stAct">Active</label>
              </div>
            </div>
          </div>

          <div class="row g-3 mb-4">
            <div class="col-6 col-lg-3"><div class="stat"><span class="small wdw-muted">Total users</span><strong class="fs-4" data-stat="users">1,350</strong><span class="badge bg-success-subtle text-success-emphasis">+8.2%</span></div></div>
            <div class="col-6 col-lg-3"><div class="stat"><span class="small wdw-muted">Uptime</span><strong class="fs-4">99.98%</strong><span class="badge bg-success-subtle text-success-emphasis">Healthy</span></div></div>
            <div class="col-6 col-lg-3"><div class="stat"><span class="small wdw-muted">Avg. latency</span><strong class="fs-4">142 ms</strong><span class="badge bg-warning-subtle text-warning-emphasis">+12 ms</span></div></div>
            <div class="col-6 col-lg-3"><div class="stat"><span class="small wdw-muted" data-peak-label>Peak requests</span><strong class="fs-4" data-peak>0</strong><span class="badge bg-primary-subtle text-primary-emphasis">This week</span></div></div>
          </div>

          <div class="chart-wrap bg-body-tertiary rounded-4 p-3 position-relative">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <span class="small fw-semibold"><span class="legend-dot"></span><span data-chart-title>Requests per hour</span></span>
              <span class="small wdw-muted" data-readout aria-live="polite">Hover the chart</span>
            </div>
            <svg class="chart" viewBox="0 0 720 240" role="img" aria-label="Line chart of server activity over six days" preserveAspectRatio="none" data-chart></svg>
            <div class="d-flex justify-content-between small wdw-muted px-1 mt-1" aria-hidden="true"><span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More admin snippets