Bootstrap 5 kanban boards use horizontal flex layout with card components in each column. This page covers a static kanban and a drag-and-drop kanban using the native HTML5 API.
Layout Foundation
<div class="d-flex gap-3 overflow-auto">
<div style="min-width:260px;flex-shrink:0;">
<!-- Column 1 -->
</div>
<div style="min-width:260px;flex-shrink:0;">
<!-- Column 2 -->
</div>
</div>
1. Bootstrap 5 Basic Kanban Board
Three-column kanban layout with task cards, badges and assignee avatars.
2. Bootstrap 5 Draggable Kanban Board
Kanban board with drag-and-drop using the HTML5 Drag and Drop API — no library needed.
Frequently Asked Questions
Use a horizontal flex container (d-flex gap-3) with each column as a flex child (min-width:260px, flex-shrink:0). Add overflow-x:auto to the container for horizontal scrolling. Cards inside each column use Bootstrap's card component with gap-2 for spacing.
Add draggable='true' to task cards. Listen for dragstart to store the dragged element. Add dragover (with preventDefault) and drop listeners to column containers. On drop, append the dragged element to the target column. This is the native HTML5 Drag and Drop API.
SortableJS is the most popular — lightweight, touch support, animation. Add it via CDN and initialize: Sortable.create(column, { group: 'kanban', animation: 150 }). Add the same group name to all columns so cards can move between them.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.