Kanban Boards

What is a kanban board?

A kanban board organises tasks into columns that represent stages of work, such as To do, In progress, Review and Done. Each task is a card that moves from column to column as work progresses. Kanban boards are the core view of project management tools, support desks, recruitment pipelines and sales CRMs, and they are a popular layout for admin dashboards.

When to use a kanban board

• When work flows through clear, ordered stages.
• To give a team a shared overview of who is doing what.
• For pipelines such as leads, applicants or support tickets.
• When limiting work in progress per column helps the team focus.

Best practices

• Keep cards scannable: title, assignee avatar, labels and a due date are usually enough.
• Show a count in each column header so users see the load at a glance.
• On desktop, let columns scroll horizontally inside the board; on phones, stack columns or show one column at a time with tabs.
• Drag and drop is not enough on its own. Provide a keyboard or menu alternative such as a "Move to" action so keyboard and screen reader users can change a card's column.
• Give columns a heading element and render cards as list items so the structure is clear without visuals.
• Use colour labels together with text, never colour alone.
• Keep column widths fixed so cards do not reflow while dragging.

Framework versions

The kanban board examples here range from static column layouts to boards with drag and drop written in small vanilla JavaScript. Bootstrap 6 versions use theme-* colour roles for labels and column accents, with scripts as ES modules. Bootstrap 5 versions build columns from cards and flex utilities, Tailwind CSS versions use flex, gap and overflow utilities, and pure CSS versions show how far you can get with CSS grid. Preview each board live, check the code tabs, and copy or download the snippet to connect it to your own task data.