Thumbnail adalah gambar berukuran kecil yang berfungsi sebagai pratinjau untuk gambar yang lebih besar atau halaman detail. Dalam desain web, thumbnail sangat penting untuk membuat galeri, daftar produk, atau portofolio yang rapi dan menarik secara visual. Dengan Bootstrap 5, membuat thumbnail yang responsif dan bergaya menjadi sangat mudah. 🖼️

Catatan Penting: Perubahan dari Bootstrap Versi Lama

Jika Anda pernah menggunakan Bootstrap 3, Anda mungkin familiar dengan kelas .thumbnail. Penting untuk diketahui bahwa kelas ini telah dihapus di Bootstrap 4 dan 5.

Sebagai gantinya, Bootstrap sekarang menyediakan pendekatan yang lebih fleksibel menggunakan kelas utilitas untuk gambar dan komponen Card untuk tata letak yang lebih kompleks. Mari kita bahas kedua cara tersebut.

## Cara 1: Thumbnail Sederhana dengan .img-thumbnail

Ini adalah cara tercepat dan paling dasar untuk memberikan gaya thumbnail pada sebuah gambar. Kelas .img-thumbnail akan menambahkan bingkai (border) abu-abu tipis, sedikit padding, dan sudut yang sedikit membulat pada gambar Anda.

Cukup tambahkan kelas .img-thumbnail ke tag <img> Anda. Untuk membuatnya responsif, jangan lupa tambahkan juga kelas .img-fluid.

Contoh Kode:

<img src="https://via.placeholder.com/200" class="img-thumbnail img-fluid" alt="Contoh gambar thumbnail">

Hasilnya: Gambar Anda akan memiliki tampilan seperti ini:

Cara ini sangat cocok jika Anda hanya butuh menampilkan gambar dengan gaya bingkai sederhana tanpa teks atau tombol tambahan.

## Cara 2: Pendekatan Modern Menggunakan Komponen Card

Untuk membuat thumbnail yang lebih fungsional—lengkap dengan judul, deskripsi, dan tombol—pendekatan yang paling umum dan direkomendasikan adalah menggunakan komponen Card Bootstrap. Komponen ini adalah pengganti langsung dari kelas .thumbnail versi lama dan jauh lebih fleksibel.

Struktur dasar sebuah Card terdiri dari:

• .card: Elemen pembungkus utama.
• .card-img-top: Untuk menempatkan gambar di bagian atas kartu.
• .card-body: Wadah untuk konten teks seperti judul dan deskripsi.
• .card-title dan .card-text: Untuk menata judul dan paragraf teks.

Contoh Kode Card:

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Gambar produk">
  <div class="card-body">
    <h5 class="card-title">Judul Produk</h5>
    <p class="card-text">Ini adalah deskripsi singkat mengenai produk atau item yang ditampilkan dalam thumbnail.</p>
    <a href="#" class="btn btn-primary">Lihat Detail</a>
  </div>
</div>

Komponen Card memberikan Anda tata letak thumbnail yang bersih, modern, dan siap pakai untuk berbagai keperluan seperti katalog produk, galeri portofolio, atau daftar artikel.

## Membuat Galeri Thumbnail dengan Grid System

Tentu saja, thumbnail jarang berdiri sendiri. Biasanya, Anda ingin menampilkannya dalam sebuah galeri. Di sinilah Grid System Bootstrap berperan. Anda bisa dengan mudah menyusun beberapa Card ke dalam baris dan kolom yang responsif.

Caranya adalah dengan membungkus Card Anda di dalam struktur .container, .row, dan .col-*.

Contoh Kode Galeri:

<div class="container">
  <div class="row">
    <div class="col-md-4 mb-3">
      <div class="card">
        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Gambar 1">
        <div class="card-body">
          <h5 class="card-title">Item Pertama</h5>
          <p class="card-text">Deskripsi untuk item pertama.</p>
          <a href="#" class="btn btn-primary">Detail</a>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="card">
        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Gambar 2">
        <div class="card-body">
          <h5 class="card-title">Item Kedua</h5>
          <p class="card-text">Deskripsi untuk item kedua.</p>
          <a href="#" class="btn btn-primary">Detail</a>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <div class="card">
        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="Gambar 3">
        <div class="card-body">
          <h5 class="card-title">Item Ketiga</h5>
          <p class="card-text">Deskripsi untuk item ketiga.</p>
          <a href="#" class="btn btn-primary">Detail</a>
        </div>
      </div>
    </div>
  </div>
</div>

Penjelasan Kode:

• col-md-4: Memberitahu browser untuk membuat setiap kolom memakan 4 dari 12 unit grid pada layar medium (desktop) dan lebih besar. Ini akan menghasilkan 3 kolom per baris.
• Pada layar yang lebih kecil (mobile), kolom-kolom ini akan otomatis menumpuk secara vertikal, membuat galeri Anda sepenuhnya responsif.
• mb-3: Kelas margin-bottom untuk memberi sedikit jarak antar baris kartu.

Kesimpulan

Meskipun kelas .thumbnail yang lama sudah tidak ada, Bootstrap 5 menyediakan alat yang jauh lebih kuat dan fleksibel untuk membuat thumbnail.

• Gunakan .img-thumbnail untuk styling gambar sederhana dan cepat.
• Gunakan komponen .card untuk thumbnail modern yang berisi gambar, teks, dan tombol.
• Kombinasikan Card dengan Grid System untuk membangun galeri yang indah dan responsif.

Dengan pendekatan ini, Anda bisa membuat tata letak berbasis thumbnail yang profesional dengan sangat efisien. 🚀