# 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
Updates

Vue 3 Updates

9
Done

Schedule winter campaign

2
In progress
Errors

Fix Firefox errors

11
Updates

Argon Dashboard PRO - Angular 11

3
In review
In Testing

Responsive Changes

11
In review

Change images dimension

In Review

Update Links

6
Done
Done

Redesign for the home page

8

##### Choose your new Board Name

##### Task details

Changes saved!
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>