Web Designer Wall

Snippets E-commmerce

Bootstrap 5 Product Listing with Navbar

An e-commerce product listing with a responsive navbar, a quote-added confirmation bar and a grid of product cards with wishlist and add-to-quote actions.

Bootstrap 5 No jQuery Sep 2020 2.6K views 

<section class="wdw-stage align-items-start">
  <div class="container" style="max-width: 1040px">
    <nav class="navbar navbar-expand-md wdw-card-sm px-3 mb-4">
      <a class="navbar-brand fw-bold wdw-heading" href="#">Penton</a>
      <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#plNav" aria-controls="plNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="plNav">
        <ul class="navbar-nav me-auto">
          <li class="nav-item"><a class="nav-link" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Products</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
        <a href="#" class="btn btn-sm btn-primary rounded-pill mt-2 mt-md-0" id="plQuoteBtn" aria-label="Quote, 1 item">Your quote <span class="badge text-bg-light rounded-pill ms-1" id="plCount" aria-hidden="true">1</span></a>
      </div>
    </nav>

    <div class="alert alert-success d-flex flex-wrap align-items-center gap-3 border-0 rounded-4 mb-4" role="status" id="plAlert">
      <div class="flex-grow-1"><strong id="plAlertTitle">Item added to your quote</strong><div class="small" id="plAlertSub">Wireless Headphones</div></div>
      <a href="#" class="btn btn-sm btn-outline-success rounded-pill">Continue shopping</a>
      <a href="#" class="btn btn-sm btn-success rounded-pill">Go to quote</a>
    </div>

    <span class="visually-hidden" role="status" aria-live="polite" id="plLive"></span>
    <h2 class="h4 wdw-heading mb-3">Related products</h2>
    <div class="row g-3">
      <div class="col-6 col-lg-4">
        <article class="wdw-card-sm h-100 overflow-hidden pl-card">
          <div class="position-relative"><span class="badge text-bg-primary rounded-pill pl-badge">New</span>
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&w=600&h=450&q=70" class="pl-img" alt="Wireless Headphones" width="600" height="450" loading="lazy">
          </div>
          <div class="p-3">
            <h3 class="h6 fw-bold mb-1">Wireless Headphones</h3>
            <p class="small mb-1 pl-rate"><span class="text-warning-emphasis"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></span> <span class="wdw-muted">4.8</span></p>
            <p class="small mb-3 fw-semibold">$129</p>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-outline-secondary rounded-circle p-0 pl-wish" style="width:44px;height:44px" aria-pressed="false" aria-label="Add Wireless Headphones to wishlist"><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="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
              <button type="button" class="btn btn-primary rounded-pill flex-grow-1 pl-add" data-name="Wireless Headphones">Add</button>
            </div>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-4">
        <article class="wdw-card-sm h-100 overflow-hidden pl-card">
          <div class="position-relative">
            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=600&h=450&q=70" class="pl-img" alt="Classic Watch" width="600" height="450" loading="lazy">
          </div>
          <div class="p-3">
            <h3 class="h6 fw-bold mb-1">Classic Watch</h3>
            <p class="small mb-1 pl-rate"><span class="text-warning-emphasis"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></span> <span class="wdw-muted">4.6</span></p>
            <p class="small mb-3 fw-semibold">$189</p>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-outline-secondary rounded-circle p-0 pl-wish" style="width:44px;height:44px" aria-pressed="false" aria-label="Add Classic Watch to wishlist"><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="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
              <button type="button" class="btn btn-primary rounded-pill flex-grow-1 pl-add" data-name="Classic Watch">Add</button>
            </div>
          </div>
        </article>
      </div>
      <div class="col-6 col-lg-4">
        <article class="wdw-card-sm h-100 overflow-hidden pl-card">
          <div class="position-relative"><span class="badge text-bg-danger rounded-pill pl-badge">Sale</span>
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&w=600&h=450&q=70" class="pl-img" alt="Running Sneakers" width="600" height="450" loading="lazy">
          </div>
          <div class="p-3">
            <h3 class="h6 fw-bold mb-1">Running Sneakers</h3>
            <p class="small mb-1 pl-rate"><span class="text-warning-emphasis"><svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z"/></svg></span> <span class="wdw-muted">4.7</span></p>
            <p class="small mb-2"><s class="wdw-muted">$135</s> <strong class="text-danger">$95</strong> <span class="text-success-emphasis small">Save 30%</span></p>
            <div class="d-flex gap-2">
              <button type="button" class="btn btn-outline-secondary rounded-circle p-0 pl-wish" style="width:44px;height:44px" aria-pressed="false" aria-label="Add Running Sneakers to wishlist"><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="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z"/></svg></button>
              <button type="button" class="btn btn-primary rounded-pill flex-grow-1 pl-add" data-name="Running Sneakers">Add</button>
            </div>
          </div>
        </article>
      </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 e-commmerce snippets