Cara Membuat Thumbnail Pada Bootstrap

Halloo teman-teman, pada tutorial kali ini saya akan mengajarkan bagaimana caranya membuat Thumbnail pada Bootstrap. Thumbnail didalam Bootstrap biasanya digunakan untuk mengatur layout Gambar, Video, Teks, dan lain-lainnya didalam sebuah kotak. Nah Bootstrap mempunyai cara yang mudah untuk mengatur itu semua caranya dengan menggunakan Thumbnail.

Default Thumbnails

Berikut adalah cara menggunakan Thumbnails didalam Bootstrap :

- Kalian bisa membuat tag <a> kemudian, kalian bisa menambahkan class thumbnail.

- Thumbnails yang terdapat pada bootstrap ini sudah memiliki jarak dalam (padding) dan border.

- Pada saat kalian arahkan kursor ke gambar atau kalian hover gambar tersebut, maka akan terdapat animasi efek border berwarna biru.

Berikut adalah contoh Source Code nya :

JIka kalian jalankan maka hasinya seperti gambar dibawah ini :

Adding Custom Content

Sekarang kita akan mencoba menambahkan sebuah Judul, Paragraph, dan Button didalam Thumbnails tersebut. Caranya :

- Kalian bisa rubah tag <a> menjadi tag <div>.

- Kemudian didalam tag <div> kalian bisa tambahkan atribut class dengan nama Thumbnails.

- Dan buat satu tag <div> kembali didalam div class thumbnails, dan beri nama class caption untuk isi contentnya.

Berikut adalah contoh Source Code nya:

Jika dijalankan maka hasilnya akan seperti gambar dibawah ini :

Download Source