Gambar
Dokumentasi lan conto kanggo milih gambar menyang prilaku responsif (supaya padha ora dadi luwih gedhe tinimbang unsur induk) lan nambah gaya entheng kanggo wong-kabeh liwat kelas.
Gambar responsif
Gambar ing Bootstrap digawe responsif karo .img-fluid
. max-width: 100%;
lan height: auto;
ditrapake kanggo gambar supaya skala karo unsur induk.
<img src="..." class="img-fluid" alt="...">
Gambar SVG lan Internet Explorer
Ing Internet Explorer 10 lan 11, gambar SVG kanthi .img-fluid
ukuran ora proporsional. Kanggo ndandani iki, nambah width: 100%;
utawa .w-100
yen perlu. Ndandani iki salah ukuran format gambar liyane, supaya Bootstrap ora aplikasi iku kanthi otomatis.
Gambar cilik gambar
Saliyane utilitas radius wewatesan , sampeyan bisa nggunakake .img-thumbnail
kanggo menehi gambar tampilan wewatesan 1px sing dibunderaké.
<img src="..." class="img-thumbnail" alt="...">
Nyelarasake gambar
Selarasake gambar karo kelas helper float utawa kelas alignment teks . block
-gambar tingkat bisa dipusatake nggunakake kelas .mx-auto
sarana margin .
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">
<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Gambar
Yen sampeyan nggunakake <picture>
unsur kanggo nemtokake macem -macem <source>
unsur kanggo tartamtu <img>
, priksa manawa kanggo nambah .img-*
kelas kanggo <img>
lan ora kanggo <picture>
tag.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>