Bootstrap Projects Components

<section class="py-6">
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4 mb-4 mb-lg-0">
        <div class="py-5 px-6 border rounded-2">
          <div class="d-flex align-items-center">
            <svg class="me-2" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="7" stroke="#7A899B" stroke-width="2" stroke-dasharray="2 2"></circle></svg>
            <p class="fw-bold text-dark mb-0">
              <span>Backlog</span>
              <span class="badge ms-2 bg-primary-light text-primary">56</span>
            </p>
            <a class="ms-auto me-2 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" href="#" style="width: 32px; height: 32px;">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 6H11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6 1V11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
            <button class="flex-shrink-0 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" style="width: 32px; height: 32px;">
              <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 9.5C12.3284 9.5 13 8.82843 13 8C13 7.17157 12.3284 6.5 11.5 6.5C10.6716 6.5 10 7.17157 10 8C10 8.82843 10.6716 9.5 11.5 9.5Z" fill="#7A899B"></path>
                <path d="M5.9375 8C5.9375 8.79391 5.29391 9.4375 4.5 9.4375C3.70609 9.4375 3.0625 8.79391 3.0625 8C3.0625 7.20609 3.70609 6.5625 4.5 6.5625C5.29391 6.5625 5.9375 7.20609 5.9375 8Z" fill="#7A899B" stroke="#7A899B" stroke-width="0.125"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-4 mb-lg-0">
        <div class="py-5 px-6 border rounded-2">
          <div class="d-flex align-items-center">
            <svg class="me-2" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="8" cy="8" r="7" stroke="#E7430F" stroke-width="2"></circle>
              <path d="M8 12C8.52529 12 9.04543 11.8965 9.53073 11.6955C10.016 11.4945 10.457 11.1999 10.8284 10.8284C11.1999 10.457 11.4945 10.016 11.6955 9.53073C11.8965 9.04543 12 8.52529 12 8C12 7.47471 11.8965 6.95457 11.6955 6.46927C11.4945 5.98396 11.1999 5.54301 10.8284 5.17157C10.457 4.80014 10.016 4.5055 9.53073 4.30448C9.04543 4.10346 8.52529 4 8 4L8 8L8 12Z" fill="#E7430F"></path>
            </svg>
            <p class="fw-bold text-dark mb-0">
              <span>In Progress</span>
              <span class="badge ms-2 bg-primary-light text-primary">56</span>
            </p>
            <a class="ms-auto me-2 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" href="#" style="width: 32px; height: 32px;">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 6H11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6 1V11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
            <button class="flex-shrink-0 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" style="width: 32px; height: 32px;">
              <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 9.5C12.3284 9.5 13 8.82843 13 8C13 7.17157 12.3284 6.5 11.5 6.5C10.6716 6.5 10 7.17157 10 8C10 8.82843 10.6716 9.5 11.5 9.5Z" fill="#7A899B"></path>
                <path d="M5.9375 8C5.9375 8.79391 5.29391 9.4375 4.5 9.4375C3.70609 9.4375 3.0625 8.79391 3.0625 8C3.0625 7.20609 3.70609 6.5625 4.5 6.5625C5.29391 6.5625 5.9375 7.20609 5.9375 8Z" fill="#7A899B" stroke="#7A899B" stroke-width="0.125"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="py-5 px-6 border rounded-2">
          <div class="d-flex align-items-center">
            <svg class="me-2" width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="8" cy="8" r="8" fill="#4CA899"></circle>
              <path d="M10.1465 5.64652L6.99996 8.79302L5.85346 7.64652C5.75916 7.55544 5.63286 7.50504 5.50176 7.50618C5.37066 7.50732 5.24525 7.55991 5.15255 7.65261C5.05985 7.74532 5.00726 7.87072 5.00612 8.00182C5.00498 8.13292 5.05538 8.25922 5.14646 8.35352L6.64646 9.85352C6.74022 9.94726 6.86738 9.99991 6.99996 9.99991C7.13254 9.99991 7.2597 9.94726 7.35346 9.85352L10.8535 6.35352C10.9445 6.25922 10.9949 6.13292 10.9938 6.00182C10.9927 5.87072 10.9401 5.74532 10.8474 5.65261C10.7547 5.55991 10.6293 5.50732 10.4982 5.50618C10.3671 5.50504 10.2408 5.55544 10.1465 5.64652Z" fill="white"></path>
            </svg>
            <p class="fw-bold text-dark mb-0">
              <span>Done</span>
              <span class="badge ms-2 bg-primary-light text-primary">56</span>
            </p>
            <a class="ms-auto me-2 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" href="#" style="width: 32px; height: 32px;">
              <svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 6H11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M6 1V11" stroke="#7A899B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </a>
            <button class="flex-shrink-0 btn d-inline-flex align-items-center justify-content-center p-0 btn-outline-light shadow rounded-1" style="width: 32px; height: 32px;">
              <svg width="16" height="16" viewbox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.5 9.5C12.3284 9.5 13 8.82843 13 8C13 7.17157 12.3284 6.5 11.5 6.5C10.6716 6.5 10 7.17157 10 8C10 8.82843 10.6716 9.5 11.5 9.5Z" fill="#7A899B"></path>
                <path d="M5.9375 8C5.9375 8.79391 5.29391 9.4375 4.5 9.4375C3.70609 9.4375 3.0625 8.79391 3.0625 8C3.0625 7.20609 3.70609 6.5625 4.5 6.5625C5.29391 6.5625 5.9375 7.20609 5.9375 8Z" fill="#7A899B" stroke="#7A899B" stroke-width="0.125"></path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>