Web Designer Wall

Snippets Bar

Bootstrap 5 Help Center with Search Bar

A help-center panel with a prominent search field and six topic tiles that filter as you type.

Bootstrap 5 No jQuery Jul 2020 2.3K views 

<section class="wdw-stage">
  <div class="container" style="max-width:760px">
    <div class="wdw-card overflow-hidden">
      <div class="wdw-aurora text-center px-3 px-md-5 py-5">
        <span class="wdw-eyebrow text-white-50">Help center</span>
        <h1 class="wdw-heading text-white h2 mt-1 mb-4">Hi! How can we help you?</h1>
        <form class="help-search mx-auto" role="search" onsubmit="return false">
          <label for="helpSearch" class="visually-hidden">Search help topics</label>
          <span class="help-search-icon" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg></span>
          <input id="helpSearch" type="search" class="form-control form-control-lg rounded-pill border-0" placeholder="Search for answers" autocomplete="off">
        </form>
      </div>
      <div class="p-3 p-md-4">
        <div class="row g-3" id="helpGrid">
        <div class="col-6 col-md-4" data-help-item data-name="account sign in, passwords, profile">
          <a href="#" class="help-tile d-flex flex-column gap-2 p-3 h-100 text-decoration-none">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></svg></span>
            <span class="fw-bold text-body-emphasis">Account</span>
            <span class="small wdw-muted">Sign in, passwords, profile</span>
          </a>
        </div>
        <div class="col-6 col-md-4" data-help-item data-name="payments cards, invoices, refunds">
          <a href="#" class="help-tile d-flex flex-column gap-2 p-3 h-100 text-decoration-none">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="5" width="20" height="14" rx="3"/><path d="M2 10h20M6 15h4"/></svg></span>
            <span class="fw-bold text-body-emphasis">Payments</span>
            <span class="small wdw-muted">Cards, invoices, refunds</span>
          </a>
        </div>
        <div class="col-6 col-md-4" data-help-item data-name="delivery tracking and shipping">
          <a href="#" class="help-tile d-flex flex-column gap-2 p-3 h-100 text-decoration-none">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg></span>
            <span class="fw-bold text-body-emphasis">Delivery</span>
            <span class="small wdw-muted">Tracking and shipping</span>
          </a>
        </div>
        <div class="col-6 col-md-4" data-help-item data-name="products specs, sizes, stock">
          <a href="#" class="help-tile d-flex flex-column gap-2 p-3 h-100 text-decoration-none">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8 12 3 3 8l9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8"/></svg></span>
            <span class="fw-bold text-body-emphasis">Products</span>
            <span class="small wdw-muted">Specs, sizes, stock</span>
          </a>
        </div>
        <div class="col-6 col-md-4" data-help-item data-name="returns 30-day free returns">
          <a href="#" class="help-tile d-flex flex-column gap-2 p-3 h-100 text-decoration-none">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8M3 3v5h5"/></svg></span>
            <span class="fw-bold text-body-emphasis">Returns</span>
            <span class="small wdw-muted">30-day free returns</span>
          </a>
        </div>
        <div class="col-6 col-md-4" data-help-item data-name="warranty coverage and claims">
          <a href="#" class="help-tile d-flex flex-column gap-2 p-3 h-100 text-decoration-none">
            <span class="wdw-icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6l-8-3z"/><path d="m9 12 2 2 4-4"/></svg></span>
            <span class="fw-bold text-body-emphasis">Warranty</span>
            <span class="small wdw-muted">Coverage and claims</span>
          </a>
        </div>
        </div>
        <p id="helpEmpty" class="text-center wdw-muted my-4 d-none" role="status">No topics match your search. Try another word.</p>
      </div>
    </div>
  </div>
</section>

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

Related snippets

More Bar snippets