Card kolom bootstrap

Mungkin teman2, pernah mengalami hal yang sama. Jadi ini saya punya template bootstrap, saat di demo, data produknya itu tersusun rapih, tapi ketika saya isi produk dari database, tiba2 acak gini. Mohon bantuannya.

screencapture-localhost-carwash-produk-2022-03-21-08_14_14-min.png

Kode

<div id="shop-four" class="shop-page shop-four-main-block">
    <div class="container">
      <div class="row">
        <?php foreach($produk as $prd): ?>
        <div class="col-md-3 col-sm-6">
          <div class="shop-block">
            <div class="shop-img text-center">
              <img src="assets/home/images/shop/<?php echo $prd['produk_foto']; ?>" class="img-responsive" alt="<?php echo $prd['produk_foto']; ?>">
              <div class="overlay-bg"></div>
               <a href="product/<?php echo $prd['produk_url']; ?>" class="btn btn-default"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Buy Now</a>
            </div>
            <div class="shop-dtl text-center">
              <a href="product/<?php echo $prd['produk_url']; ?>"><h6 class="product-name"><?php echo $prd['produk_judul']; ?></h6></a>
              <div class="shop-price">
                <p>Rp. <?php echo number_format($prd['produk_harga'],0,',','.'); ?></p>
              </div>
            </div>
          </div>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </div>

html

@Ahmad554

95 Kontribusi 39 Poin

Diperbarui 2 tahun yang lalu

2 Jawaban:

<pre><div class="col-md-3 col-sm-6"> <br><?php foreach($produk as $prd): ?></pre><div><br><br></div><div><br>coba tukar posisi nya mas, seperti itu </div>

@AlmoestEnda28

15 Kontribusi 3 Poin

Dipost 2 tahun yang lalu

Tanggapan

Gak jadi mas, malah jadi vertical smua

@Ahmad554

<div>Kalo saya biasanya memastikan gambar yang ditampilkan itu memiliki resolusi yang sama, apabila user mengunggah gambar yang resolusinya berbeda, saya biasanya menentukan width/height-nya agar sama disetiap gambar, namun sayangnya akan ada beberapa gambar yang aspek rasionya kurang bagus.<br>Kemudian kalo dilihat dari screenshot yang agan lampirkan itu judul/nama setiap produk itu kan berbeda-beda ya, kalo dilihat ada yg hanya 1 baris, ada juga yg 2 baris. Saran saya mungkin coba dibuat agar ditetapkan nilai default-nya, apakaha 1 baris atau 2 baris. Misalkan agan ditetapkan menjadi 2 baris untuk nama produk, maka data produk yg namanya cukup 1 barus, mau tidak mau size-nya harus dibuat sama dengan yg 2 baris, kemudian untuk yg lebih dari 2 baris, triknya cukup hilangkan saja kelebihan text-nya, biasanya kalo saya di-replace menjadi "..." seperti itu.<br>Kalo size gambar + nama produk-nya sama, harusnya hasilnya juga bakalan rapih.</div>

@ahanafi

815 Kontribusi 554 Poin

Dipost 2 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Card kolom bootstrap

Kelas Premium!
Belajar bikin website dari nol sekarang