Bootstrap kütüphanesi ile ürün listeleme sayfası oluşturma

Bootstrap, ürün listeleme sayfaları oluşturmak için kullanabileceğiniz bazı özellikler sunar. Öncelikle, Bootstrap’i projenize dahil etmeniz gerekmektedir.

<div class="container">
  <div class="row">
    <!-- Her bir ürün için bir kart oluşturun -->
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top" src="urun1.jpg" alt="Ürün 1">
        <div class="card-body">
          <h4 class="card-title">Ürün 1</h4>
          <p class="card-text">Ürün 1 hakkında kısa bir açıklama.</p>
          <a href="#" class="btn btn-primary">Ürünü Görüntüle</a>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top" src="urun2.jpg" alt="Ürün 2">
        <div class="card-body">
          <h4 class="card-title">Ürün 2</h4>
          <p class="card-text">Ürün 2 hakkında kısa bir açıklama.</p>
          <a href="#" class="btn btn-primary">Ürünü Görüntüle</a>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top" src="urun3.jpg" alt="Ürün 3">
        <div class="card-body">
          <h4 class="card-title">Ürün 3</h4>
          <p class="card-text">Ürün 3 hakkında kısa bir açıklama.</p>
          <a href="#" class="btn btn-primary">Ürünü Görüntüle</a>
        </div>
      </div>
    </div>
  </div>
</div>