Gambar-gambar

Dokumentasi dan contoh untuk mengikutsertakan gambar ke dalam perilaku responsif (sehingga gambar tidak pernah menjadi lebih lebar dari induknya) dan menambahkan gaya ringan ke gambar tersebut—semuanya melalui kelas.

Di halaman ini

Gambar responsif

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

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

Thumbnail gambar

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

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

Menyejajarkan gambar

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

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

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

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

Kelancangan

Variabel

Variabel tersedia untuk gambar mini gambar.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;