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.
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-thumbnail
untuk 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-auto
utilitas 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;