Terdapat beberapa bentuk dari Gambar yang ada di Bootstrap 4 antara lain Rounded Corner, Circle, dan Thumbnails. Berikut adalah contohnya:

Gambar Rounded Corner

Kita dapat menggunakan Class .rounded untuk membuat gambar menjadi Rounded Corner. Berikut adalah contohnya:

<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="rounded" alt="EL Creative Organization">

Gambar Thumbnail

Kita dapat menggunakan Class .img-thumbnail untuk membuat gambar Thumbnail (Memiliki Border). Berikut adalah contohnya:

<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="img-thumbnail" alt="EL Creative Organization">

Gambar Bulat (Circle)

Kita dapat menggunakan Class .rounded-circle untuk membuat gambar menjadi bulat (Circle). Berikut adalah contohnya:

<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="rounded-circle" alt="EL Creative Organization">

Mengatur Perataan Gambar

Kita dapat mengatur perataan (Float) gambar ke kanan dengan menggunakan Class .float-right atau ke kiri dengan menggunakan Class .float-left. Berikut adalah contohnya:

<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="float-left" alt="EL Creative Organization" width="350px">
<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="float-right" alt="EL Creative Organization" width="350px">

Perataan Gambar Tengah (Center)

Kita dapat mengatur perataan gambar menjadi rata tengah (Center) dengan cara menambahkan Class Utility seperti .mx-auto (margin:auto) dan .d-block (display:block) pada gambar. Berikut adalah contohnya:

<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="mx-auto d-block" alt="EL Creative Organization" width="350px">

Gambar Responsive

Setiap gambar pasti memiliki ukuran yang berbeda-beda, begitupula dengan ukuran layar. Gambar yang Responsive dapat secara otomatis menyesuaikan ukuran layar dengan tepat.

Kita dapat membuat gambar Responsive dengan menambahkan Class .img-fluid pada Tag <img>. Class .img-fluid menerapkan lebar maksimal (max-width) 100%; dan tinggi (height) auto. Berikut adalah contohnya:

<img src="https://1.bp.blogspot.com/-3fxYMPSkglE/XXEqoYT86tI/AAAAAAAAGgM/cBLLnuer9kQppe2hH-IwpLSqr4Qsa0U2wCLcBGAs/s1600/ELC.jpg" class="img-fluid" alt="EL Creative Organization">