Bootstrap 5

Bootstrap 5 Kanban Board

A Kanban Board is a visual workflow component built with Bootstrap 5 that organises tasks or items into horizontal columns representing stages of a process (e.g. To Do, In Progress, Done). Each column contains draggable cards with task metadata such as assignee, priority label, and due date. Use it when you need a lightweight, embeddable project or workflow tracker inside a dashboard or SaaS application.

Primary Class

.kanban-board

Common Use Cases

→Sprint planning dashboards in internal dev tools where engineering teams track tickets across Backlog, In Review, Staging, and Deployed columns
→Content editorial calendars showing articles moving through Idea, Drafting, Editing, and Published stages with writer avatars on each card
→Sales CRM pipeline views where leads progress through Lead, Qualified, Proposal Sent, and Closed Won columns with deal value badges
→Bug tracking boards in client-facing portals displaying issues by severity across Reported, Assigned, In Fix, and Resolved lanes

Variants & Classes

Variant	Description	Classes
Kanban Board Default	Standard kanban board with Bootstrap's default styling.	`kanban-board`
Kanban Board Responsive	Responsive variant that adapts to different screen sizes.	`kanban-board kanban-board-responsive`

Code Example

<div class="d-flex gap-3 overflow-auto pb-3" style="min-height: 520px;">

  <!-- Column: To Do -->
  <div class="flex-shrink-0" style="width: 280px;">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-semibold mb-0">To Do</h6>
      <span class="badge bg-secondary">3</span>
    </div>
    <div class="d-flex flex-column gap-2">

      <div class="card border shadow-sm">
        <div class="card-body p-3">
          <span class="badge bg-danger-subtle text-danger mb-2">High Priority</span>
          <p class="card-text small fw-medium mb-2">Redesign onboarding flow for mobile users</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=1" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Due Dec 10</small>
          </div>
        </div>
      </div>

      <div class="card border shadow-sm">
        <div class="card-body p-3">
          <span class="badge bg-warning-subtle text-warning mb-2">Medium</span>
          <p class="card-text small fw-medium mb-2">Write API documentation for v2 endpoints</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=2" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Due Dec 14</small>
          </div>
        </div>
      </div>

      <div class="card border shadow-sm">
        <div class="card-body p-3">
          <span class="badge bg-info-subtle text-info mb-2">Low</span>
          <p class="card-text small fw-medium mb-2">Audit colour contrast across admin pages</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=3" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Due Dec 20</small>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Column: In Progress -->
  <div class="flex-shrink-0" style="width: 280px;">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-semibold mb-0">In Progress</h6>
      <span class="badge bg-primary">2</span>
    </div>
    <div class="d-flex flex-column gap-2">

      <div class="card border border-primary shadow-sm">
        <div class="card-body p-3">
          <span class="badge bg-danger-subtle text-danger mb-2">High Priority</span>
          <p class="card-text small fw-medium mb-2">Integrate Stripe billing for annual plans</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=4" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Due Dec 8</small>
          </div>
        </div>
      </div>

      <div class="card border shadow-sm">
        <div class="card-body p-3">
          <span class="badge bg-warning-subtle text-warning mb-2">Medium</span>
          <p class="card-text small fw-medium mb-2">Set up automated email sequences in HubSpot</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=5" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Due Dec 12</small>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Column: In Review -->
  <div class="flex-shrink-0" style="width: 280px;">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-semibold mb-0">In Review</h6>
      <span class="badge bg-warning text-dark">1</span>
    </div>
    <div class="d-flex flex-column gap-2">

      <div class="card border shadow-sm">
        <div class="card-body p-3">
          <span class="badge bg-info-subtle text-info mb-2">Low</span>
          <p class="card-text small fw-medium mb-2">QA test checkout flow on Safari 17</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=6" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Due Dec 9</small>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Column: Done -->
  <div class="flex-shrink-0" style="width: 280px;">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h6 class="fw-semibold mb-0">Done</h6>
      <span class="badge bg-success">2</span>
    </div>
    <div class="d-flex flex-column gap-2">

      <div class="card border shadow-sm opacity-75">
        <div class="card-body p-3">
          <span class="badge bg-success-subtle text-success mb-2">Completed</span>
          <p class="card-text small fw-medium mb-2 text-decoration-line-through text-muted">Launch dark mode toggle in settings</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=7" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Dec 5</small>
          </div>
        </div>
      </div>

      <div class="card border shadow-sm opacity-75">
        <div class="card-body p-3">
          <span class="badge bg-success-subtle text-success mb-2">Completed</span>
          <p class="card-text small fw-medium mb-2 text-decoration-line-through text-muted">Migrate database to PostgreSQL 16</p>
          <div class="d-flex justify-content-between align-items-center">
            <img src="https://i.pravatar.cc/24?img=8" class="rounded-circle" width="24" height="24" alt="Assignee">
            <small class="text-muted">Dec 3</small>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

Live Examples

Basic Kanban Board

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated kanban board with custom colours
✓Kanban Board with interactive states
✓Responsive kanban board for all screen sizes

Best Practices

Use overflow-auto on the board wrapper, not individual columns

Apply `overflow-auto` and a fixed `min-height` to the outer flex container so the entire board scrolls horizontally on smaller screens without breaking individual column layouts. Pair with `flex-shrink-0` and an explicit `width` on each column to prevent them from collapsing.

Highlight active columns with a coloured left border

Add `border-start border-4 border-primary` to a `.card` wrapping an active column header to visually distinguish which stage is the current bottleneck — far more scannable than relying on badge colours alone.

Use opacity-75 and text-decoration-line-through to de-emphasise completed cards

Bootstrap's `opacity-75` utility combined with `text-decoration-line-through` on the card title communicates task completion at a glance without removing cards from the DOM, which preserves history and reduces JavaScript complexity.

Scope drag-and-drop to a data attribute rather than class selectors

When adding drag behaviour with SortableJS or the native HTML5 Drag API, target `data-kanban-column` attributes instead of Bootstrap class names. This keeps your JS decoupled from visual styling and prevents breakage when you update utility classes.

FAQ

Does Bootstrap 5 include built-in drag-and-drop for Kanban cards?

No. Bootstrap 5 provides no drag-and-drop behaviour natively. The visual layout — columns, cards, badges — is pure Bootstrap utility classes. For drag-and-drop you need a small JavaScript library. SortableJS is the most popular choice: it's ~15KB, has no jQuery dependency, and integrates cleanly by pointing it at each column container. You can also use the browser's native HTML5 Drag API with `draggable="true"` and `ondragover` / `ondrop` event handlers if you want zero extra dependencies.

How do I make column card limits (WIP limits) visually obvious?

Add a conditional class to the column badge when the card count hits your limit. For example, swap `bg-secondary` for `bg-danger` on the badge element when the count exceeds your threshold. You can also change the column header background using `bg-danger-subtle` and add a `title` attribute explaining the WIP limit for accessibility. This requires a few lines of JavaScript to count `.card` children and toggle classes — no custom CSS needed.

How does Canvas Builder generate Kanban Board components?

When you describe a Kanban Board in Canvas Builder, it generates a fully structured multi-column HTML layout using Bootstrap 5 flex utilities, card components, and badge classes — already wired to your project's brand colours via CSS custom properties. The output includes realistic placeholder content matched to your described use case (e.g. a sales pipeline vs. a dev sprint board), responsive horizontal scroll behaviour, and clean semantic markup ready for SortableJS integration. No manual layout work required.