Digital Cilacap - Untuk memasukan gambar  atau memunculkan gambar dengan framework bootstrap versi 5.2 cukup mudah. Kita hanya mengcopy paste codingan bootstrap kedalam halaman projek html atau php. Berikut beberap Cara Menampilkan Gambar dengan Bootstrap V 5.2.

Responsive Images

Untuk membuat gambar responsive di projek website yang sedang dibangun. Kita hanya perlu nenambahkan class (img-fluid) didalam struktur codingan gambar. Bootstrap akan otomatis mengatur ketinggian gambar dan mengatur lebar gambar menjadi 100%. Silahkan copy paste codingan dibawah untuk memunculkan gambar menjadi responsive.

<img src="FILE GAMBAR NYA" class="img-fluid" alt="...">

Kalian tinggal mengganti FILE GAMBAR NYA dengan nama file gambar kalian.

Image Thumbnails

Untuk membuat gambar thumnail (yaitu style gambar yang ada list bordernya dengan batas 1px) yaitu dengan menambahkan class img-thumnail di codingan gambarnya. Berikut codingannya

<img src="..." class="img-thumbnail" alt="...">

Aligning Images

Menjajarkan beberapa gambar agar selaras dan otomatis margin bisa dengan menambahkan class (rounded float-start atau rounded float-end). atau bisa juga dengan class (rounded mx-auto d-block), tergantung dari pilihan mana yang kamu inginkan. Berikut codenya

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

atau

<img src="..." class="rounded mx-auto d-block" alt="...">

atau pakai code dibawah ini agar align nya center
<div class="text-center">
  <img src="..." class="rounded" alt="...">
div>

Picture

Menggunakan elemen dengan didalamnya disipi elemen tag

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
picture>

Variabel

Berikut beberapa variabel yang bisa kamu sisipkan untuk membuat gambar mini

$thumbnail-padding:             .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;

Itulah beberapa cara menampilkan gambar dengan bootstrap v 5.2. Semoga bermanfaat. 

cara menampilkan gambar dengan bootstrap v 5.2