→ Mateo Rojas
→ Search section with category filter

Search section with category filter

This bootstrap css example is contributed by Mateo Rojas, on 21-Dec-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is find

Tags: Search Bar

Author Mateo Rojas

7.6k

v.5.3

Fork Fullscreen

<div class="quick-filters">
            <span class="quick-filter">Price: Low to High</span>
            <span class="quick-filter">Best Rated</span>
            <span class="quick-filter">New Arrivals</span>
          </div>
        </div>

<div class="category-filters">
          <div class="filter-chip active">
            <i class="fas fa-globe"></i> All
          </div>
          <div class="filter-chip">
            <i class="fas fa-laptop"></i> Electronics
          </div>
          <div class="filter-chip">
            <i class="fas fa-tshirt"></i> Fashion
          </div>
          <div class="filter-chip">
            <i class="fas fa-home"></i> Home & Living
          </div>
          <div class="filter-chip">
            <i class="fas fa-dumbbell"></i> Sports
          </div>
          <div class="filter-chip">
            <i class="fas fa-book"></i> Books
          </div>
          <div class="filter-chip">
            <i class="fas fa-gamepad"></i> Gaming
          </div>

<div class="suggestions">
            <div class="suggestion-item">
              Wireless Headphones <span class="suggestion-category">in Electronics</span>
            </div>
            <div class="suggestion-item">
              Running Shoes <span class="suggestion-category">in Sports</span>
            </div>
            <div class="suggestion-item">
              Smart Watch <span class="suggestion-category">in Electronics</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

More Examples