Source

Gambar-gambar

Dokumentasi dan contoh untuk mengikutsertakan gambar ke dalam perilaku responsif (sehingga mereka tidak pernah menjadi lebih besar dari elemen induknya) dan menambahkan gaya ringan ke dalamnya—semua melalui kelas.

Gambar responsif

Gambar di Bootstrap dibuat responsif dengan .img-fluid. max-width: 100%;dan height: auto;diterapkan pada gambar sehingga menskalakan dengan elemen induk.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
Gambar SVG dan IE 10

Di Internet Explorer 10, gambar SVG dengan .img-fluidukuran yang tidak proporsional. Untuk memperbaikinya, tambahkan width: 100% \9;jika perlu. Perbaikan ini tidak sesuai dengan ukuran format gambar lain, sehingga Bootstrap tidak menerapkannya secara otomatis.

Thumbnail gambar

Selain utilitas radius batas kami , Anda dapat menggunakan .img-thumbnailuntuk memberikan gambar tampilan batas 1px yang membulat.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

Menyejajarkan gambar

Sejajarkan gambar dengan kelas float pembantu atau kelas penyelarasan teks . block-gambar level dapat dipusatkan menggunakan kelas .mx-autoutilitas margin .

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

Gambar

Jika Anda menggunakan <picture>elemen untuk menentukan beberapa <source>elemen untuk <img>, pastikan untuk menambahkan .img-*kelas ke <img>dan bukan ke <picture>tag.

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