</> ConvertAtlas Developer Tools
Admin Dashboards · Advanced

Pulse — Project Management Dashboard

A project management dashboard with a compact icon-rail sidebar, sprint KPI cards, a three-column kanban snapshot, team workload bars and upcoming milestones.

Uses Bootstrap 5, Bootstrap Icons, ApexCharts. Bootstrap 5 plus the CDN tags below. The downloaded file already includes everything.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/apexcharts@3.49.1/dist/apexcharts.min.js"></script>
Full preview Download 
<aside class="pl-side">
  <div class="rounded-3 d-grid text-white fw-bold mb-3" style="width:44px;height:44px;place-items:center;background:linear-gradient(135deg,#7c3aed,#a855f7)">CA</div>
  <a class="active" href="#"><i class="bi bi-kanban"></i></a>
  <a href="#"><i class="bi bi-calendar3"></i></a>
  <a href="#"><i class="bi bi-chat-dots"></i></a>
  <a href="#"><i class="bi bi-folder2-open"></i></a>
  <a href="#"><i class="bi bi-pie-chart"></i></a>
  <a href="#" class="mt-auto"><i class="bi bi-gear"></i></a>
</aside>
<main class="pl-main">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
    <div><h4 class="fw-bold mb-0">ConvertAtlas v2 Redesign</h4><span class="text-secondary small">Sprint 8 · Jun 8 – Jun 21</span></div>
    <div class="d-flex align-items-center gap-3">
      <div class="d-flex ps-2"><span class="pl-av" style="background:#7c3aed">AL</span><span class="pl-av" style="background:#16a34a">BC</span><span class="pl-av" style="background:#f59e0b">CD</span><span class="pl-av" style="background:#64748b">+4</span></div>
      <button class="btn text-white" style="background:linear-gradient(135deg,#7c3aed,#a855f7);border:0"><i class="bi bi-plus-lg me-1"></i>New task</button>
    </div>
  </div>
  <div class="row g-3 mb-3">
    <div class="col-md-4"><div class="pl-card p-3 d-flex justify-content-between align-items-center"><div><div class="text-secondary small">Sprint progress</div><div class="h4 fw-bold mb-0">68%</div></div><div id="plRad1"></div></div></div>
    <div class="col-md-4"><div class="pl-card p-3 d-flex justify-content-between align-items-center"><div><div class="text-secondary small">Tasks done</div><div class="h4 fw-bold mb-0">34 / 50</div></div><i class="bi bi-check2-circle fs-2" style="color:#16a34a"></i></div></div>
    <div class="col-md-4"><div class="pl-card p-3 d-flex justify-content-between align-items-center"><div><div class="text-secondary small">Hours logged</div><div class="h4 fw-bold mb-0">212h</div></div><i class="bi bi-stopwatch fs-2" style="color:#7c3aed"></i></div></div>
  </div>
  <div class="row g-3">
    <div class="col-lg-8">
      <div class="row g-3">
        <div class="col-md-4"><div class="pl-col" style="background:#eee9fb"><div class="d-flex justify-content-between small fw-bold mb-2 px-1">To do <span class="text-secondary">3</span></div><div class="d-grid gap-2"><div class="pl-task"><span class="badge text-bg-light mb-1" style="color:#7c3aed">Design</span><div class="small fw-semibold">Templates gallery hero</div></div><div class="pl-task"><span class="badge text-bg-light mb-1" style="color:#dc2626">Bug</span><div class="small fw-semibold">Fix cookie banner overlap</div></div><div class="pl-task"><span class="badge text-bg-light mb-1" style="color:#0d6efd">Dev</span><div class="small fw-semibold">Wire AdSense slots</div></div></div></div></div>
        <div class="col-md-4"><div class="pl-col" style="background:#e8f3fd"><div class="d-flex justify-content-between small fw-bold mb-2 px-1">In progress <span class="text-secondary">2</span></div><div class="d-grid gap-2"><div class="pl-task"><span class="badge text-bg-light mb-1" style="color:#0d6efd">Dev</span><div class="small fw-semibold">Snippet search rebuild</div><div class="progress mt-2" style="height:5px"><div class="progress-bar" style="width:60%;background:#7c3aed"></div></div></div><div class="pl-task"><span class="badge text-bg-light mb-1" style="color:#7c3aed">Design</span><div class="small fw-semibold">Atlas dark palette</div><div class="progress mt-2" style="height:5px"><div class="progress-bar" style="width:35%;background:#7c3aed"></div></div></div></div></div></div>
        <div class="col-md-4"><div class="pl-col" style="background:#e9f9ef"><div class="d-flex justify-content-between small fw-bold mb-2 px-1">Done <span class="text-secondary">4</span></div><div class="d-grid gap-2"><div class="pl-task opacity-75"><div class="small fw-semibold text-decoration-line-through">Audit Core Web Vitals</div></div><div class="pl-task opacity-75"><div class="small fw-semibold text-decoration-line-through">Ship 435 snippets</div></div><div class="pl-task opacity-75"><div class="small fw-semibold text-decoration-line-through">New ~/ footer</div></div></div></div></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="pl-card p-3 mb-3"><h6 class="fw-bold mb-1">Workload</h6><div id="plBar"></div></div>
      <div class="pl-card p-3"><h6 class="fw-bold mb-2">Upcoming</h6>
        <div class="d-flex gap-2 small mb-2"><span class="badge text-bg-light">Jun 14</span> Design review</div>
        <div class="d-flex gap-2 small mb-2"><span class="badge text-bg-light">Jun 17</span> Stakeholder demo</div>
        <div class="d-flex gap-2 small"><span class="badge text-bg-light">Jun 21</span> Sprint retro</div>
      </div>
    </div>
  </div>
</main>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>
body{background:#f6f5fb;font-family:system-ui,-apple-system,sans-serif}
.pl-side{width:78px;background:#fff;border-right:1px solid #ece9f6;min-height:100vh;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:6px;z-index:100}
.pl-side a{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;color:#8d86a8;font-size:20px;text-decoration:none}
.pl-side a:hover{background:#f3f0fb;color:#6d28d9}
.pl-side a.active{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 6px 18px rgba(124,58,237,.35)}
.pl-main{margin-left:78px;padding:24px}
.pl-card{background:#fff;border:0;border-radius:18px;box-shadow:0 2px 4px rgba(40,20,90,.04),0 10px 28px rgba(40,20,90,.06)}
.pl-col{border-radius:14px;padding:12px}
.pl-task{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(40,20,90,.08)}
.pl-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.65rem;font-weight:700;border:2px solid #fff;margin-left:-8px}
@media(max-width:767px){.pl-side{display:none}.pl-main{margin-left:0}}
new ApexCharts(document.querySelector('#plRad1'),{chart:{type:'radialBar',height:110,width:110,sparkline:{enabled:true}},series:[68],colors:['#7c3aed'],plotOptions:{radialBar:{hollow:{size:'55%'},dataLabels:{show:false}}}}).render();
new ApexCharts(document.querySelector('#plBar'),{chart:{type:'bar',height:190,toolbar:{show:false}},series:[{name:'Hours',data:[34,42,28,38,30]}],xaxis:{categories:['Ava','Ben','Cara','Dan','Eli']},colors:['#a855f7'],plotOptions:{bar:{horizontal:true,borderRadius:6,barHeight:'55%'}},dataLabels:{enabled:false}}).render();
Free to use — no attribution required. This is a complete, responsive Bootstrap 5 page. It uses Bootstrap 5, Bootstrap Icons, ApexCharts via CDN (linked above). Download a ready-to-open .html file with all CDN links included, or copy the HTML and drop it into your project.

What's included in this template

The Pulse — Project Management Dashboard is a complete admin dashboards design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:

  • Compact icon-rail sidebar
  • Sprint progress radial gauge
  • Three-column kanban snapshot
  • Stacked team avatar group
  • Workload horizontal bar chart
  • Upcoming milestones list

How to use it

Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single pulse-project-dashboard.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.