Membuat Grid Responsive Bootstrap Untuk Album Foto

Setelah mempelajari cara membuat website Bootstrap dari part 1 hingga part 10, mungkin diantara para pembaca yang mengikuti tutorialnya memerlukan sebuah grid yang bagus untuk menampilkan album foto atau keperluan lainnya. Jika mengikut tutorial dari awal, seharusnya tidak akan sulit lagi mengikuti langkah-langkah di bawah ini untuk membuat grid yang responsive.

Di bawah ini mencontohkan sebuah grid Bootstrap responsive dengan 3 kolom saja, kamu dapat menyesuaikan jumlahnya sesuai keperluan. Ini adalah bagan dasar yang perlu disisipkan ke dalam kode HTML:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Kolom Pertama
    </div>
    <div class="col-md-4">
      Kolom Kedua
    </div>
    <div class="col-md-4">
      Kolom Ketiga
    </div>
  </div>
</div>

Simpan dan lihat hasilnya ! Ini hanya satu baris saja, jika ingin membuat beberapa baris silahkan tambahkan lagi class row baru di bawahnya tapi masih di dalam container ini. Sebelum membahas lebih jauh, pastikan untuk memberi class baru pada setiap col-md-4 agar nanti mudah untuk mengatur style nya. Misalnya <div class="col-md-4 item-foto">berikan nama class dengan benar dan mudah diingat.

Pada halaman Examples Bootstrap terdapat salah satu contoh yang menampilkan album foto seperti ini:

Pada contoh ini terdapat bidang gambar sebagai thumbnail pada bagian atas, diikuti dengan deskripsi / teks di bawahnya, dan di akhiri dengan tombol di paling bawah dari masing-masing kolom. Asumsikan kita semua akan membuat grid seperti di atas. Tidak perlu sama persis dengan contoh, kita buat berbeda. Sesuaikanlah dengan desain yang disukai.

Thumbnail Album

Bagian pertama adalah gambar thumbnail, bidang baru untuk foto di dalam col-md-4. Misalnya seperti ini:

<div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
        </div>
      </div>
    </div>

Terdapat <div> baru yang isinya adalah tag gambar, gunakanlah gambar yang ingin digunakan, panggil gambar tersebut di folder bersangkutan dengan benar agar muncul. Sejauh ini hasilnya akan terlihat seperti ini:

Baru gambar saja, belum ditambahkan komponen lainn di bawahnya.

Deskripsi Album

Untuk menambahkan teks atau deskripsi, buatlah bidang baru tepat di bawah gambar. Sebetulnya kamu dapat membuat di dalam <div> yang sama, tapi sebaiknya buatlah <div> baru setelah </div> penutup gambar.

<div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
          <div class="deskripsi-album">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
          <div class="deskripsi-album">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
          <div class="deskripsi-album">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
          <div class="deskripsi-album">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
          <div class="deskripsi-album">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </div>
        </div>
        <div class="col-md-4">
          <div class="thumbnail">
            <img src="images/featured.jpg" class="img-responsive">
          </div>
          <div class="deskripsi-album">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </div>
        </div>
      </div>
    </div>

Saat ini deskripsi masih terlihat berantakan dan kurang rapih, itu bisa di atur nanti yang jelas saat ini di bawah gambar terdapat deskripsi.

Footer Album

Sebut saja Footer Album, ini adalah bagian bawah dari masing-masing grid album foto yang akan dibuat. Jika pada contoh di atas, isinya adalah tombol dan waktu. Buatlah <div> baru lagi tepat setelah </div> penutup deskripsi.

<div class="btn-group" role="group" aria-label="">
   <button type="button" class="btn btn-default">Detail</button>
   <button type="button" class="btn btn-default">Like</button>
</div>

Bootstrap sudah menyediakan komponen button yang dapat digunakan digunakan mudah, cukup panggil class-class tombol yang diperlukan. Contohnya seperti kode di atas.

Sejauh ini, tampilan grid album foto akan tampil seperti ini:

Terlihat semua struktur bidang tertata-tata dengan baik dan benar, selanjutnya silahkan terapkan style sesuai desain yang diinginkan termasuk baris antara tombol dan thumbnail di bawahnya (pastikan untuk memberikan class baru agar tombol ini dapat di kustom). Masih bingung memberikan gaya pada grid ini ? Ini adalah contoh CSS yang digunakan untuk grid di atas:

.tombol-grid-album {
   margin: 3% 0 5%;
}

Tambahkanlah style keren lainnya pada file CSS bersangkutan sesuai desain website yang kamu buat, berikut ini adalah hasil akhir dari semua kode di atas:

Contoh album pada gambar pertama di atas itu adalah Examples dari Bootstrap 4, sedangkan script yang kita bangun ini adalah Bootstrap 3. Sengaja berbagi agar tidak kesulitan lagi membuat grid foto walaupun menggunakan Bootstrap 3 tanpa panel.

Grid responsive Bootstrap seperti ini biasanya digunakan untuk menampilkan halaman galeri foto / album foto di website. Pastikan juga untuk melihat apa perbedaan antara Bootstrap 3 dan Bootstrap 4 juga ya…

Selamat mencoba !