Cara Membuat Gallery Dengan Bootstrap

Cara Membuat Gallery Dengan Bootstrap

Gallery merupakan salah satu elemen yang biasanya ada pada sebuah website. Fungsinya adalah menampilkan gambar-gambar.

Kita dapat menggunakan bootstrap untuk membuat Gallery, dengan bootstrap kita dapat membuat gallery dengan mudah, cepat, dan pastinya responsive.

Berikut hasil akhirnya.

Hasil Akhir

Langsung saja berikut caranya.

Membuat HTML

Yang pertama kita buat struktur htmlnya. Disini saya memberikan container, lalu saya menggunakan grid.

<div class="container">
  <h1 class="my-3">Gallery</h1>
  <div class="row">
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img1.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img2.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img3.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img8.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img4.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img5.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img6.jpg" class="img-thumbnail">
    </div>
    <div class="col-sm-4 col-md-3 gallery py-3">
      <img src="img7.jpg" class="img-thumbnail">
    </div>
  </div>
</div>

Mengatur CSS

Disini saya mengatur css agar semua gambar, atau gallerinya memiliki tinggi yang sama.

.gallery{
  height: 200px;
}
.gallery img{
  height: 100%;
  object-fit: cover;
}

Sekarang save dan buka di browser.

Gallery

Coba kita cek ke-responsivanya

Cek Responsive

Gallery akan terlihat bagus di perangkat mobile.

Untuk efek, dan selanjutnya silahkan lanjutkan sendiri.

Sekian postingan saya kali ini, semoga bermanfaat.

Related Post

Comments

X