Source

Gambar

Dokuméntasi sareng conto pikeun milih gambar kana paripolah responsif (supaya aranjeunna henteu janten langkung ageung tibatan elemen indungna) sareng nambihan gaya anu hampang pikeun aranjeunna-sadayana ngalangkungan kelas.

Gambar responsif

Gambar dina Bootstrap didamel responsif sareng .img-fluid. max-width: 100%;sarta height: auto;dilarapkeun kana gambar sangkan skala jeung unsur indungna.

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

Dina Internet Explorer 10, gambar SVG sareng .img-fluidukuranana henteu saimbang. Pikeun ngalereskeun ieu, tambahkeun width: 100% \9;upami diperyogikeun. Perbaikan ieu teu leres ukuran format gambar anu sanés, janten Bootstrap henteu otomatis nerapkeunana.

Gambar leutik

Salian utilitas wates-radius kami , anjeun tiasa nganggo .img-thumbnailpikeun masihan gambar tampilan wates 1px anu bunder.

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">

aligning gambar

Sejajarkeun gambar sareng kelas ngambang helper atanapi kelas alignment téks . blockgambar -level bisa dipuseurkeun ngagunakeun kelas .mx-autoutiliti 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

Upami Anjeun keur make <picture>unsur pikeun nangtukeun sababaraha <source>elemen pikeun husus <img>, pastikeun pikeun nambahkeun .img-*kelas ka <img>jeung teu <picture>tag.

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