Cara Memanfaatkan Class Gambar Pada Bootstrap 4

Gambar yang kita tampilkan di dalam html  ketika lihat di browser maka akan terlihat ukuran asli dari gambarnya. Karena itu kita pasti selalu mengatur lebar dari gambar tersebut menggunakan css. Tapi jika kita buka di berbagai device tentu akan jelek tampilannya. Karena ukuran layar pada pc tablet atau mobile berbeda-beda. Nah pada artikel Cara Memanfaatkan  Class Gambar Pada Bootstrap 4 saya akan membahas tentang cara membuat gambar responsive, tidak hanya itu tapi masih banyak class yang disediakan oleh bootstrap 4 tentang mengatur gambar.

Langsung saja pembahasan pertama tentang artikel Cara Memanfaatkan  Class Gambar Pada Bootstrap 4 yaitu kita mulai dengan membuat gambar yang responsive. Dimana kita hanya perlu memasukkan .img-fluid pada tag img di html, seperti pada script di bawah ini.

Pembahasan selanjutnya saya akan membahas tentang image thumbnails yaitu class yang disediakan oleh bootstrap untuk memberikan suatu border pada sebuah gambar. Dan berikut ini adalah contoh implementasinya.

Jika kita lihat hasilnya di browser masing-masing maka hasilnya seperti pada gambar di bawah ini.

Pembahasan selanjutnya adalah tentang aligning images yang berarti mengatur align atau posisi dari suatu gambar. Berikut ini adalah class-class yang mengatur align gambar.

• .float-left mengatur gambar di posisi kiri
• .float-right mengatur gambar di posisi kanan
• .mx-auto mengatur gambar di posisi tengah dengan memberikan d-block agar membuat gambar tersebut bersifat display block
• .text-center yang diberikan terhadap pembungkus dari suatu gambar agar berada di posisi tengah.

Berikut ini adalah implementasi dari aligning imagesnya.

Jika lihat hasilnya maka akan tampak seperti pada gambar di bawah ini.

Demikian pembahasan mengenai Cara Memanfaatkan  Class Gambar Pada Bootstrap 4. Semoga dapat bermanfaat dan selamat mencoba.