Lumpat menyang isi utama Lumpat menyang pandhu arah docs
Check
in English

Gambar

Dokumentasi lan conto kanggo milih gambar dadi prilaku responsif (supaya ora dadi luwih akeh tinimbang wong tuwane) lan nambah gaya entheng kanggo dheweke-kabeh liwat kelas.

Gambar responsif

Gambar ing Bootstrap digawe responsif karo .img-fluid. Iki ditrapake max-width: 100%;lan height: auto;kanggo gambar supaya timbangan karo jembaré induk.

Placeholder Responsive image
html
<img src="..." class="img-fluid" alt="...">

Gambar cilik gambar

Saliyane utilitas radius wewatesan , sampeyan bisa nggunakake .img-thumbnailkanggo menehi gambar tampilan wewatesan 1px sing dibunderaké.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
html
<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-autosarana margin .

Placeholder 200x200 Placeholder 200x200
html
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
html
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
html
<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>

Sass

Variabel

Variabel kasedhiya kanggo gambar cilik gambar.

$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;