# Bootstrap 5 Kanban Board

A Bootstrap 5 Kanban board snippet with Dragula drag-and-drop task cards and swimlanes. Try the live example and reuse the HTML and CSS in your own dashboard.

Built with: Bootstrap 5, Dragula 3.7.2

Tags: Bootstrap, Bootstrap 5, Kanban, Kanban Board, Tasks, Draggable

Live, editable example (HTML/CSS/JS source): https://jsfiddle.net/adminkit/vzudye75/

Published: 2020-06-03 · Last updated: 2026-07-31

## FAQ

**Q: How does the drag-and-drop work?**

A: The board uses Dragula, a lightweight vanilla-JS library. Cards can be dragged between swimlanes and reordered within a column.

**Q: Can I persist the task order to my back end?**

A: Yes. Dragula fires drop events you can listen to and send the new column/order to your server or database.

**Q: Does the Kanban board need jQuery?**

A: No. Dragula is vanilla JavaScript, consistent with AdminKit's jQuery-free approach.

**Q: Can I use this board in a commercial project?**

A: Yes. The snippet is open markup using Bootstrap and Dragula, both of which are free for commercial use.

---

Canonical HTML page: https://adminkit.io/snippets/bootstrap-5-kanban-board/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io