Bootstrap Filter Chips — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bschip-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Filter products</h6>

      <div class="d-flex flex-wrap gap-2 mb-3">
        <button type="button" class="btn btn-sm btn-outline-secondary bschip-toggle" data-filter="stock">In stock</button>
        <button type="button" class="btn btn-sm btn-outline-secondary bschip-toggle" data-filter="sale">On sale</button>
        <button type="button" class="btn btn-sm btn-outline-secondary bschip-toggle" data-filter="ship">Free shipping</button>
        <button type="button" class="btn btn-sm btn-outline-secondary bschip-toggle" data-filter="cheap">Under $50</button>
      </div>

      <div class="d-flex flex-wrap gap-2 mb-3 d-none" id="bschipRow">
        <span class="small text-muted align-self-center">Active:</span>
      </div>

      <p class="small fw-semibold mb-2" id="bschipCount">Showing 6 of 6 products</p>
      <ul class="list-unstyled mb-0" id="bschipList"></ul>
    </div>
  </div>
</div>

.bschip-card { width: 400px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bschip-toggle.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.bschip-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 6px 3px 10px; border-radius: 20px;
  background: #eef0ff; color: #4338ca; font: 600 11.5px system-ui, sans-serif;
}
.bschip-pill button { border: none; background: none; color: inherit; line-height: 1; padding: 2px; cursor: pointer; }
.bschip-item { padding: 6px 4px; font-size: 13px; border-bottom: 1px solid #f1f2f5; }
.bschip-item:last-child { border-bottom: none; }

const PRODUCTS = [
  { name: 'Trail Runner Jacket', price: 42, stock: true, sale: true, ship: true },
  { name: 'Insulated Water Bottle', price: 18, stock: true, sale: false, ship: true },
  { name: 'Carbon Trekking Poles', price: 89, stock: false, sale: false, ship: false },
  { name: 'Merino Wool Socks (3-pack)', price: 24, stock: true, sale: true, ship: false },
  { name: 'Backcountry Tent 2P', price: 210, stock: true, sale: false, ship: true },
  { name: 'Compact Camp Stove', price: 45, stock: false, sale: true, ship: true },
];

const LABELS = { stock: 'In stock', sale: 'On sale', ship: 'Free shipping', cheap: 'Under $50' };
const active = new Set();

const toggles = Array.from(document.querySelectorAll('.bschip-toggle'));
const chipRow = document.getElementById('bschipRow');
const count = document.getElementById('bschipCount');
const list = document.getElementById('bschipList');

function matches(product, filter) {
  if (filter === 'cheap') return product.price < 50;
  return Boolean(product[filter]);
}

function render() {
  const filtered = PRODUCTS.filter(p => Array.from(active).every(f => matches(p, f)));

  chipRow.classList.toggle('d-none', active.size === 0);
  chipRow.innerHTML = '<span class="small text-muted align-self-center">Active:</span>' +
    Array.from(active).map(f =>
      '<span class="bschip-pill">' + LABELS[f] + '<button type="button" data-remove="' + f + '">&times;</button></span>'
    ).join('') +
    (active.size > 1 ? '<button type="button" class="btn btn-sm btn-link p-0" id="bschipClearAll">Clear all</button>' : '');

  count.textContent = 'Showing ' + filtered.length + ' of ' + PRODUCTS.length + ' products';
  list.innerHTML = filtered.map(p =>
    '<li class="bschip-item d-flex justify-content-between"><span>' + p.name + '</span><span class="text-muted">$' + p.price + '</span></li>'
  ).join('') || '<li class="bschip-item text-muted">No products match these filters.</li>';
}

function toggleFilter(key) {
  if (active.has(key)) active.delete(key); else active.add(key);
  toggles.forEach(btn => btn.classList.toggle('active', active.has(btn.dataset.filter)));
  render();
}

toggles.forEach(btn => btn.addEventListener('click', () => toggleFilter(btn.dataset.filter)));

chipRow.addEventListener('click', e => {
  const removeKey = e.target.dataset.remove;
  if (removeKey) { toggleFilter(removeKey); return; }
  if (e.target.id === 'bschipClearAll') {
    active.clear();
    toggles.forEach(btn => btn.classList.remove('active'));
    render();
  }
});

render();