Bootstrap Bulk Action Toolbar — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bsbulk-card">
    <div class="card-body p-3">

      <div class="d-flex justify-content-between align-items-center mb-2 bsbulk-header" id="bsbulkDefaultHeader">
        <h6 class="fw-bold mb-0">Team members</h6>
        <span class="small text-muted">5 total</span>
      </div>

      <div class="d-flex justify-content-between align-items-center mb-2 bsbulk-toolbar d-none" id="bsbulkToolbar">
        <span class="small fw-semibold" id="bsbulkCount">0 selected</span>
        <div class="d-flex gap-2">
          <button type="button" class="btn btn-sm btn-outline-secondary" id="bsbulkArchive">Archive</button>
          <button type="button" class="btn btn-sm btn-outline-danger" id="bsbulkDeleteBtn">Delete</button>
          <button type="button" class="btn btn-sm btn-link text-decoration-none" id="bsbulkClear">Clear</button>
        </div>
      </div>

      <table class="table table-sm align-middle mb-0">
        <thead>
          <tr>
            <th style="width:36px"><input type="checkbox" class="form-check-input" id="bsbulkSelectAll"></th>
            <th>Name</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody id="bsbulkBody">
          <tr data-row><td><input type="checkbox" class="form-check-input bsbulk-row-check"></td><td>Dana Reyes</td><td><span class="badge text-bg-success">Active</span></td></tr>
          <tr data-row><td><input type="checkbox" class="form-check-input bsbulk-row-check"></td><td>Marcus Lee</td><td><span class="badge text-bg-success">Active</span></td></tr>
          <tr data-row><td><input type="checkbox" class="form-check-input bsbulk-row-check"></td><td>Priya Nair</td><td><span class="badge text-bg-secondary">Invited</span></td></tr>
          <tr data-row><td><input type="checkbox" class="form-check-input bsbulk-row-check"></td><td>Sofia Chen</td><td><span class="badge text-bg-success">Active</span></td></tr>
          <tr data-row><td><input type="checkbox" class="form-check-input bsbulk-row-check"></td><td>Wale Adeyemi</td><td><span class="badge text-bg-warning">Suspended</span></td></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="modal fade" id="bsbulkModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold">Delete selected members?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0" id="bsbulkModalBody">This will remove them from the team.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger fw-bold" id="bsbulkDeleteConfirm">Delete</button>
      </div>
    </div>
  </div>
</div>

.bsbulk-card { width: 480px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsbulk-toolbar { background: #eef0ff; border-radius: 8px; padding: 8px 10px; }
tr.bsbulk-archived td { opacity: .45; }
tr.bsbulk-row-selected { background: #f8f9fb; }

const selectAll = document.getElementById('bsbulkSelectAll');
const defaultHeader = document.getElementById('bsbulkDefaultHeader');
const toolbar = document.getElementById('bsbulkToolbar');
const countEl = document.getElementById('bsbulkCount');
const body = document.getElementById('bsbulkBody');
const modal = new bootstrap.Modal(document.getElementById('bsbulkModal'));
const modalBody = document.getElementById('bsbulkModalBody');

function rowChecks() {
  return Array.from(body.querySelectorAll('.bsbulk-row-check'));
}

function refresh() {
  const checks = rowChecks();
  const checked = checks.filter(c => c.checked);
  const n = checked.length;

  checks.forEach(c => c.closest('tr').classList.toggle('bsbulk-row-selected', c.checked));

  toolbar.classList.toggle('d-none', n === 0);
  defaultHeader.classList.toggle('d-none', n > 0);
  countEl.textContent = n + ' selected';

  selectAll.checked = n > 0 && n === checks.length;
  selectAll.indeterminate = n > 0 && n < checks.length;
}

selectAll.addEventListener('change', () => {
  rowChecks().forEach(c => { c.checked = selectAll.checked; });
  refresh();
});

body.addEventListener('change', e => {
  if (e.target.classList.contains('bsbulk-row-check')) refresh();
});

document.getElementById('bsbulkClear').addEventListener('click', () => {
  rowChecks().forEach(c => { c.checked = false; });
  refresh();
});

document.getElementById('bsbulkArchive').addEventListener('click', () => {
  rowChecks().filter(c => c.checked).forEach(c => {
    c.closest('tr').classList.add('bsbulk-archived');
    c.checked = false;
    c.disabled = true;
  });
  refresh();
});

document.getElementById('bsbulkDeleteBtn').addEventListener('click', () => {
  const n = rowChecks().filter(c => c.checked).length;
  modalBody.textContent = 'This removes ' + n + ' member' + (n === 1 ? '' : 's') + ' from the team. This can\'t be undone.';
  modal.show();
});

document.getElementById('bsbulkDeleteConfirm').addEventListener('click', () => {
  rowChecks().filter(c => c.checked).forEach(c => c.closest('tr').remove());
  modal.hide();
  refresh();
});

refresh();