3-up Card Carousel

<div class="container py-5">
  <h3 class="fw-bold mb-4">Featured Products</h3>
  <div id="c3" class="carousel slide">
    <div class="carousel-inner">
      <div class="carousel-item active">
        <div class="row g-3">
          <div class="col-md-4">
            <div class="card"><img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&h=400&fit=crop" alt="Wrist watch" class="card-img-top" style="height:180px;object-fit:cover">
              <div class="card-body">
                <h6 class="fw-bold">Classic Watch</h6>
                <p class="text-muted small mb-0">$129</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card"><img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=600&h=400&fit=crop" alt="Red sneaker" class="card-img-top" style="height:180px;object-fit:cover">
              <div class="card-body">
                <h6 class="fw-bold">Runner Shoes</h6>
                <p class="text-muted small mb-0">$89</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card"><img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&h=400&fit=crop" alt="Headphones" class="card-img-top" style="height:180px;object-fit:cover">
              <div class="card-body">
                <h6 class="fw-bold">Wireless Headphones</h6>
                <p class="text-muted small mb-0">$199</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <div class="row g-3">
          <div class="col-md-4">
            <div class="card"><img src="https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600&h=400&fit=crop" alt="Backpack" class="card-img-top" style="height:180px;object-fit:cover">
              <div class="card-body">
                <h6 class="fw-bold">Travel Backpack</h6>
                <p class="text-muted small mb-0">$79</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card"><img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?w=600&h=400&fit=crop" alt="Smart watch" class="card-img-top" style="height:180px;object-fit:cover">
              <div class="card-body">
                <h6 class="fw-bold">Smart Watch</h6>
                <p class="text-muted small mb-0">$249</p>
              </div>
            </div>
          </div>
          <div class="col-md-4">
            <div class="card"><img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?w=600&h=400&fit=crop" alt="Sunglasses" class="card-img-top" style="height:180px;object-fit:cover">
              <div class="card-body">
                <h6 class="fw-bold">Sunglasses</h6>
                <p class="text-muted small mb-0">$59</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev bg-dark rounded-circle" style="width:40px;height:40px;top:50%" data-bs-target="#c3" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
    <button class="carousel-control-next bg-dark rounded-circle" style="width:40px;height:40px;top:50%" data-bs-target="#c3" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
  </div>
</div>