Web Designer Wall

Snippets Filter

Bootstrap 5 Advanced Search and Filter Panel

A search and filter panel for building segments, with date conditions, a star-rating rule and an AND/OR switch to combine them.

Bootstrap 5 No jQuery Aug 2020 3.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:780px">
    <form class="wdw-card overflow-hidden" id="filterPanel" onsubmit="return false">
      <div class="px-4 py-4 border-bottom">
        <span class="wdw-eyebrow">Segments</span>
        <h1 class="h4 wdw-heading mb-1">Advanced search and filter</h1>
        <p class="wdw-muted small mb-0">Build a segment to filter bookings and see business insights.</p>
      </div>

      <div class="px-4 py-4 d-flex flex-column gap-4 bg-body-tertiary">
        <div class="wdw-card-sm p-4" role="group" aria-labelledby="lg-1">
          <div class="d-flex align-items-center gap-3 fs-6 fw-bold mb-3" id="lg-1">
            <span class="wdw-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="3"/><path d="M8 3v4M16 3v4M3 10h18"/></svg></span>
            Arrival date
          </div>
          <div class="btn-group w-100 mb-3 flex-nowrap" role="group" aria-label="Date condition" data-seg="arrival">
            <input type="radio" class="btn-check" name="arrival" id="arr1" value="specific" checked><label class="btn btn-outline-primary rounded-start-pill" for="arr1">Specific</label>
            <input type="radio" class="btn-check" name="arrival" id="arr2" value="after"><label class="btn btn-outline-primary" for="arr2">After</label>
            <input type="radio" class="btn-check" name="arrival" id="arr3" value="before"><label class="btn btn-outline-primary" for="arr3">Before</label>
            <input type="radio" class="btn-check" name="arrival" id="arr4" value="between"><label class="btn btn-outline-primary rounded-end-pill" for="arr4">Between</label>
          </div>
          <div class="row g-3">
            <div class="col-12 col-sm" id="dateFromCol"><label class="form-label small fw-semibold wdw-muted" for="dateFrom">From</label><input type="date" class="form-control" id="dateFrom" value="2026-12-21"></div>
            <div class="col-12 col-sm d-none" id="dateToCol"><label class="form-label small fw-semibold wdw-muted" for="dateTo">To</label><input type="date" class="form-control" id="dateTo" value="2026-12-28"></div>
          </div>
        </div>

        <div class="wdw-card-sm p-4" role="group" aria-labelledby="lg-2">
          <div class="d-flex align-items-center gap-3 fs-6 fw-bold mb-3" id="lg-2">
            <span class="wdw-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1L3.2 9.5l6.1-.9z"/></svg></span>
            Hotel rating
          </div>
          <div class="d-flex flex-column flex-sm-row align-items-sm-center gap-3">
            <div class="btn-group flex-grow-1" role="group" aria-label="Rating condition">
              <input type="radio" class="btn-check" name="stars-op" id="op1" checked><label class="btn btn-outline-primary rounded-start-pill" for="op1">Equals</label>
              <input type="radio" class="btn-check" name="stars-op" id="op2"><label class="btn btn-outline-primary" for="op2">Less than</label>
              <input type="radio" class="btn-check" name="stars-op" id="op3"><label class="btn btn-outline-primary rounded-end-pill" for="op3">More than</label>
            </div>
            <div class="d-flex align-items-center gap-1" id="stars" role="radiogroup" aria-label="Star rating">
              <button type="button" class="star-btn" role="radio" aria-checked="false" aria-label="1 star" data-v="1"></button>
              <button type="button" class="star-btn" role="radio" aria-checked="false" aria-label="2 stars" data-v="2"></button>
              <button type="button" class="star-btn" role="radio" aria-checked="false" aria-label="3 stars" data-v="3"></button>
              <button type="button" class="star-btn" role="radio" aria-checked="false" aria-label="4 stars" data-v="4"></button>
              <button type="button" class="star-btn" role="radio" aria-checked="false" aria-label="5 stars" data-v="5"></button>
            </div>
          </div>
        </div>

        <div class="d-flex align-items-center gap-3 flex-wrap">
          <span class="small fw-semibold wdw-muted">Combine rules with</span>
          <div class="btn-group" role="group" aria-label="Combine rules">
            <input type="radio" class="btn-check" name="logic" id="and" checked><label class="btn btn-sm btn-outline-primary rounded-start-pill px-3" for="and">AND</label>
            <input type="radio" class="btn-check" name="logic" id="or"><label class="btn btn-sm btn-outline-primary rounded-end-pill px-3" for="or">OR</label>
          </div>
          
        </div>

        <div class="d-flex align-items-center gap-2 flex-wrap pt-3 border-top" aria-live="polite">
          <span class="wdw-eyebrow me-1">Active rules</span>
          <span id="chips" class="d-flex flex-wrap align-items-center gap-2"></span>
        </div>
      </div>

      <div class="px-4 py-3 d-flex gap-2 justify-content-between border-top">
        <button type="reset" class="btn btn-outline-secondary rule-cancel rounded-pill px-4">Cancel</button>
        <button type="submit" class="btn btn-primary rounded-pill px-4">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>Apply filter
        </button>
      </div>
    </form>
  </div>
</section>

Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.

Free to use in personal and commercial projects under the MIT license.

Related snippets

More filter snippets