छविहरू

उत्तरदायी छविहरू

बुटस्ट्र्यापमा छविहरू सँग उत्तरदायी बनाइन्छ .img-fluid। यो लागू हुन्छ max-width: 100%;र height: auto;छविमा ताकि यसले अभिभावक चौडाइसँग मापन गर्दछ।

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

छवि थम्बनेलहरू

हाम्रो सीमा-त्रिज्य उपयोगिताहरू बाहेक , तपाईंले .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;