Luncat ka eusi utama Luncat ka navigasi docs
in English

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. Ieu lumaku max-width: 100%;jeung height: auto;ka gambar supados skala jeung unsur indungna.

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

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="..." class="img-thumbnail" alt="...">

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-start" alt="...">
<img src="..." class="rounded float-end" 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>

Sass

Variabel

Variabel sadia pikeun gambar leutik.

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