Bootstrap Kanban Board with Drag-and-Drop Cards — Free Snippet

<div class="container py-5">
  <div class="row g-3">
    <div class="col-md-4">
      <div class="bskanban-col" data-status="todo">
        <div class="bskanban-col-head">To Do <span class="badge bg-secondary bskanban-count">2</span></div>
        <div class="bskanban-drop" data-status="todo">
          <div class="card bskanban-card" draggable="true">Design onboarding email</div>
          <div class="card bskanban-card" draggable="true">Audit API rate limits</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bskanban-col" data-status="progress">
        <div class="bskanban-col-head">In Progress <span class="badge bg-primary bskanban-count">1</span></div>
        <div class="bskanban-drop" data-status="progress">
          <div class="card bskanban-card" draggable="true">Rebuild settings page</div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="bskanban-col" data-status="done">
        <div class="bskanban-col-head">Done <span class="badge bg-success bskanban-count">1</span></div>
        <div class="bskanban-drop" data-status="done">
          <div class="card bskanban-card" draggable="true">Fix login redirect bug</div>
        </div>
      </div>
    </div>
  </div>
</div>

.bskanban-col { background: #f6f7f9; border-radius: 10px; padding: 12px; height: 100%; }
.bskanban-col-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #4b5563; margin-bottom: 10px; }
.bskanban-drop { min-height: 60px; display: flex; flex-direction: column; gap: 8px; }
.bskanban-drop.bskanban-over { background: #eef0ff; border-radius: 8px; outline: 2px dashed #6366f1; outline-offset: 2px; }
.bskanban-card { padding: 10px 12px; font-size: 13px; border: 1px solid #eceef1; cursor: grab; }
.bskanban-card.bskanban-dragging { opacity: .4; }

const cards = document.querySelectorAll('.bskanban-card');
const drops = document.querySelectorAll('.bskanban-drop');
let dragged = null;

cards.forEach(card => {
  card.addEventListener('dragstart', () => {
    dragged = card;
    card.classList.add('bskanban-dragging');
  });
  card.addEventListener('dragend', () => {
    card.classList.remove('bskanban-dragging');
    dragged = null;
    updateCounts();
  });
});

drops.forEach(zone => {
  zone.addEventListener('dragover', e => {
    e.preventDefault(); // required so 'drop' actually fires on this element
    zone.classList.add('bskanban-over');
  });
  zone.addEventListener('dragleave', () => zone.classList.remove('bskanban-over'));
  zone.addEventListener('drop', e => {
    e.preventDefault();
    zone.classList.remove('bskanban-over');
    if (dragged) zone.appendChild(dragged);
  });
});

function updateCounts() {
  document.querySelectorAll('.bskanban-col').forEach(col => {
    const count = col.querySelector('.bskanban-drop').children.length;
    col.querySelector('.bskanban-count').textContent = count;
  });
}