प्रतिमा

प्रतिसाद दिवपी प्रतिमा

बूटस्ट्रॅपांतली प्रतिमा प्रतिसाद दिवपी केल्यात .img-fluid. हें लागू जाता max-width: 100%;आनी height: auto;प्रतिमेक जेणे करून ती पालक रुंदाये वांगडा स्केल करता.

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

प्रतिमा लघुप्रतिमा

In addition to our border-radius utilities.img-thumbnail , तुमी प्रतिमेक वाटकुळें 1px शिमेचें रूप दिवपाक वापरूं येता .

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

प्रतिमा संरेखित करप

मदत करपी फ्लोट वर्ग वा मजकूर संरेखण वर्गां वांगडा प्रतिमा संरेखित करात . -स्तरीय प्रतिमा मार्जिन उपयुक्तताय वर्गblock वापरून केंद्रीत करूंक शकतात ..mx-auto

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

चित्र

जर तुमी एका विशिश्ट खातीर <picture>जायते घटक निर्देशीत करपाक घटक वापरतात जाल्यार, वर्ग टॅगाक जोडपाची खात्री करात आनी टॅगाक न्हय.<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

सास

चड-उणें

प्रतिमा लघुप्रतिमांखातीर चड-उणें उपलब्ध आसात.

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