Web Designer Wall

Snippets Buttons

Bootstrap 5 Task Management UI with Contact List

A contact list paired with a task panel: pick a person on the left and browse their open, in-progress and closed tasks on the right, with search and checkable tasks.

Bootstrap 5 No jQuery Feb 2020 2.1K views 

<section class="wdw-stage">
  <div class="container" style="max-width: 1040px">
    <div class="wdw-card overflow-hidden">
      <div class="row g-0">
        <div class="col-lg-6 border-end-lg">
          <div class="p-4 border-bottom">
            <div class="d-flex align-items-center gap-3">
              <img src="https://i.pravatar.cc/80?img=12" alt="" width="40" height="40" class="rounded-circle">
              <div class="fw-semibold text-primary">Holden Caulfield</div>
              <button type="button" class="btn btn-sm btn-light ms-auto rounded-circle p-0 tm-round" aria-label="Notifications">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"/></svg>
              </button>
            </div>
            <h1 class="h5 fw-bold mt-4 mb-1 text-body-emphasis">Contact list</h1>
            <p class="small text-body-secondary mb-3">Pick a teammate to see what is on their plate.</p>
            <div class="d-flex flex-wrap gap-2">
              <button type="button" class="btn btn-primary btn-sm rounded-pill px-3">New contact</button>
              <label class="visually-hidden" for="tmSearch">Search contacts</label>
              <input id="tmSearch" type="search" class="form-control form-control-sm rounded-pill flex-grow-1 tm-search" placeholder="Search">
            </div>
          </div>
          <div class="list-group list-group-flush tm-people" aria-label="Contacts">
            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 px-4 py-3" data-person="lucinda">
              <img src="https://i.pravatar.cc/80?img=47" alt="" width="40" height="40" class="rounded-circle">
              <span class="me-auto"><span class="d-block fw-semibold small">Lucinda Massey</span><span class="d-block small text-body-secondary">Management Consultant</span></span>
              <span class="badge bg-body-secondary text-body-emphasis rounded-pill" data-badge></span>
            </button>
            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 px-4 py-3 active" aria-current="true" data-person="willie">
              <img src="https://i.pravatar.cc/80?img=33" alt="" width="40" height="40" class="rounded-circle">
              <span class="me-auto"><span class="d-block fw-semibold small">Willie Becker</span><span class="d-block small">Business Manager</span></span>
              <span class="badge bg-body-secondary text-body-emphasis rounded-pill" data-badge></span>
            </button>
            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 px-4 py-3" data-person="sadie">
              <img src="https://i.pravatar.cc/80?img=45" alt="" width="40" height="40" class="rounded-circle">
              <span class="me-auto"><span class="d-block fw-semibold small">Sadie McDaniel</span><span class="d-block small text-body-secondary">Product Manager</span></span>
              <span class="badge bg-body-secondary text-body-emphasis rounded-pill" data-badge></span>
            </button>
            <button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-3 px-4 py-3" data-person="maggie">
              <img src="https://i.pravatar.cc/80?img=26" alt="" width="40" height="40" class="rounded-circle">
              <span class="me-auto"><span class="d-block fw-semibold small">Maggie White</span><span class="d-block small text-body-secondary">Financial Analyst</span></span>
              <span class="badge bg-body-secondary text-body-emphasis rounded-pill" data-badge></span>
            </button>
          </div>
        </div>
        <div class="col-lg-6 d-flex flex-column bg-body-tertiary">
          <div class="wdw-aurora p-4 d-flex align-items-center gap-3">
            <img id="tmAvatar" src="https://i.pravatar.cc/120?img=33" alt="" width="56" height="56" class="rounded-circle border border-2 border-white border-opacity-50">
            <div class="me-auto">
              <div id="tmName" class="fw-bold fs-5">Willie Becker</div>
              <div id="tmRole" class="small opacity-75">Business Manager</div>
            </div>
            <button type="button" class="btn btn-light btn-sm rounded-pill px-3">New task</button>
          </div>
          <div class="p-4 flex-grow-1">
            <ul class="nav nav-pills gap-1 mb-3" id="tmTabs" role="group" aria-label="Task status">
              <li class="nav-item"><button class="nav-link active rounded-pill py-1 px-3" type="button" aria-pressed="true" data-status="open">Open <span class="opacity-75" data-count="open"></span></button></li>
              <li class="nav-item"><button class="nav-link rounded-pill py-1 px-3" type="button" aria-pressed="false" data-status="progress">In progress <span class="opacity-75" data-count="progress"></span></button></li>
              <li class="nav-item"><button class="nav-link rounded-pill py-1 px-3" type="button" aria-pressed="false" data-status="closed">Closed <span class="opacity-75" data-count="closed"></span></button></li>
            </ul>
            <ul class="list-unstyled mb-0 d-flex flex-column gap-2" id="tmTasks" aria-live="polite"></ul>
          </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.

Related snippets

More buttons snippets