Bootstrap Kanban Board

by adminkit

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<div class="container py-5">
  <div class="row">

    <!-- Start lane -->
    <div class="col-12 col-lg-4">
      <div class="card mb-3">
        <div class="card-header bg-light">
          <h3 class="card-title h5 mb-1">
            Backlog
          </h3>
          <small class="mb-0 text-muted">
            Nam pretium turpis et arcu. Duis arcu.
          </small>
        </div>
        <div class="card-body">
          <div class="tasks" id="backlog">
            <!-- Start task -->
            <div class="card mb-3 cursor-grab">
              <div class="card-body">
                <p class="mb-0">You can move these elements between the containers</p>
                <div class="text-right">
                  <small class="text-muted mb-1 d-inline-block">25%</small>
                </div>
                <div class="progress" style="height: 5px;">
                  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
              </div>
            </div>
            <!-- End task -->
            <!-- Start task -->
            <div class="card mb-3 cursor-grab">
              <img class="card-img-top" src="https://source.unsplash.com/sECcwm6BN8w/400x200" alt="Bootstrap Kanban Board" />
              <div class="card-body">
                <span class="badge bg-primary text-white mb-2">On hold</span>
                <p class="mb-0">Moving them anywhere else isn't quite possible</p>
                <div class="text-right">
                  <small class="text-muted mb-1 d-inline-block">33%</small>
                </div>
                <div class="progress"...

CSS

html, body {
  background: #e9ecef;
}

.cursor-grab {
  cursor: -webkit-grab;
  cursor: grab;
}

.tasks {
  min-height: 450px;
}

JavaScript

dragula([
  document.querySelector('#backlog'),
  document.querySelector('#progress'),
  document.querySelector('#completed')
]);