Bootstrap Kanban

-
Pro Component

Pure agnostic Javascript plugin for Kanban boards

Usage

Our kanban is built using jKanban. You cand www.riccardotartaglia.it/jkanban/.

JS

In order to use this plugin on your page you will need to include the following scripts in the “Optional JS” area from the page’s footer:

Copy
<!-- Kanban scripts -->
<script src="../../assets/js/plugins/dragula/dragula.min.js"></script>
<script src="../../assets/js/plugins/jkanban/jkanban.js"></script>

Example

Backlog
Click me to change title
Drag me to 'In progress' section
Pending

Website Design: New cards for blog section and profile details

3
Image placeholderImage placeholderImage placeholder
Updates

Vue 3 Updates

9
Image placeholderImage placeholderImage placeholder
Done

Schedule winter campaign

2
Image placeholderImage placeholder
In progress
Errors

Fix Firefox errors

11
Image placeholderImage placeholder
Updates

Argon Dashboard PRO - Angular 11

3
Image placeholderImage placeholder
In review
In Testing

Responsive Changes

11
Image placeholderImage placeholder
In review

Change images dimension

Image placeholder
In Review

Update Links

6
Image placeholderImage placeholder
Done
Done

Redesign for the home page

8
Image placeholderImage placeholderImage placeholder
Copy
 <div class="mt-3 kanban-container">
    <div class="py-2 min-vh-100 d-inline-flex" style="overflow-x: auto">
      <div id="myKanban"></div>
    </div>
  </div>
  <div class="modal fade" id="new-board-modal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="h5 modal-title">Choose your new Board Name</h5>
          <button type="button" class="btn close pe-1" data-dismiss="modal" data-target="#new-board-modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="pt-4 modal-body">
          <div class="mb-4 input-group">
            <span class="input-group-text">
              <i class="far fa-edit"></i>
            </span>
            <input class="form-control" placeholder="Board Name" type="text" id="jkanban-new-board-name" />
          </div>
          <div class="text-end">
            <button class="m-1 btn btn-primary" id="jkanban-add-new-board" data-toggle="modal" data-target="#new-board-modal">
              Save changes
            </button>
            <button class="m-1 btn btn-secondary" data-dismiss="modal" data-target="#new-board-modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden opacity-50 fixed inset-0 z-40 bg-black" id="new-board-modal-backdrop"></div>
  <div class="modal fade" id="jkanban-info-modal" style="display: none" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="h5 modal-title">Task details</h5>
          <button type="button" class="btn-close text-dark" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="pt-4 modal-body">
          <input id="jkanban-task-id" class="d-none" />
          <div class="mb-4 input-group">
            <span class="input-group-text">
              <i class="far fa-edit"></i>
            </span>
            <input class="form-control" placeholder="Task Title" type="text" id="jkanban-task-title" />
          </div>
          <div class="mb-4 input-group">
            <span class="input-group-text">
              <i class="fas fa-user"></i>
            </span>
            <input class="form-control" placeholder="Task Assignee" type="text" id="jkanban-task-assignee" />
          </div>
          <div class="form-group">
            <textarea class="form-control" placeholder="Task Description" id="jkanban-task-description" type="textarea" rows="4"></textarea>
          </div>
          <div class="alert alert-success d-none">Changes saved!</div>
          <div class="text-end">
            <button class="m-1 btn btn-primary" id="jkanban-update-task" data-toggle="modal" data-target="#jkanban-info-modal">
              Save changes
            </button>
            <button class="m-1 btn btn-secondary" data-dismiss="modal" data-target="#jkanban-info-modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="hidden opacity-50 fixed inset-0 z-40 bg-black" id="jkanban-info-modal-backdrop"></div>