छवियां

प्रतिक्रियाशील छवियां

बूटस्ट्रैप च छवियां गी .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;