product list

This bootstrap css example is contributed by java stories story, on 30-Jul-2025. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Card

Author java stories story

3.8k

v.5.3

Fork Fullscreen

<section class="container py-5 my-5" id="products">
  <h2 class="text-center mb-5">Our Product</h2>

<div class="row g-4">
    
    <div class="col-md-6 col-lg-4">
      <div class="card h-100">
        <img src="https://i.imgur.com/J06wML6.jpeg" class="card-img-top" alt="Produk 1">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Produk A</h5>
          <p class="card-text">Deskripsi singkat dari produk A yang menarik dan informatif.</p>
          <p class="fw-bold text-primary">Rp50.000</p>
          <a href="#" class="btn btn-success mt-auto">Beli Sekarang</a>
        </div>
      </div>
    </div>

<div class="col-md-6 col-lg-4">
      <div class="card h-100">
        <img src="https://i.imgur.com/J06wML6.jpeg" class="card-img-top" alt="Produk 2">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Produk B</h5>
          <p class="card-text">Deskripsi singkat dari produk B yang informatif dan ringkas.</p>
          <p class="fw-bold text-primary">Rp75.000</p>
          <a href="#" class="btn btn-success mt-auto">Beli Sekarang</a>
        </div>
      </div>
    </div>

<div class="col-md-6 col-lg-4">
      <div class="card h-100">
        <img src="https://i.imgur.com/J06wML6.jpeg" class="card-img-top" alt="Produk 3">
        <div class="card-body d-flex flex-column">
          <h5 class="card-title">Produk C</h5>
          <p class="card-text">Deskripsi menarik dari produk C yang menjelaskan fitur utamanya.</p>
          <p class="fw-bold text-primary">Rp100.000</p>
          <a href="#" class="btn btn-success mt-auto">Beli Sekarang</a>
        </div>
      </div>
    </div>
  </div>
</section>

More Examples

E-Commerce Product Page

Author:
Creative Araf

4 months ago

441

v.5.3
Home Page of portfolio (WDD)

Author:
sajid taz

4 months ago

752

v.4.6
working

Author:
Gana JNsksk

5 months ago

352

v.4.6
siam service list items section
saervice list

Author:
MD Siam Miya

5 months ago

342

v.4.6
Kategori Produk

Author:
java stories story

1 year ago

2.1k

v.5.3
NewsPortal Full Website

Author:
Zahid Hasan Riyad

2 months ago

819

v.5.3
Test

Author:
Anonymous

6 months ago

333

v.5.3
Skill Section with Progress Bar
This is a responsive skill section built with Bootstrap and external CSS. It shows different skills with progress bars like HTML, CSS, Bootstrap and JavaScript.

Author:
Happy Khatun

5 months ago

649

v.4.6
Cart Hero Pro

Author:
Juan Antonio González Hernández

7 months ago

1.1k

v.5.3
Portfolio page

Author:
sajid taz

4 months ago

937

v.4.6
Client Feedback

Author:
Shahriar Noyon

5 months ago

528

v.4.6
E-Commerce Contact Section

Author:
Creative Araf

4 months ago

364

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent