छवियन के बा
रिस्पांसिव बिहेवियर में छवि सभ के चुने खातिर दस्तावेजीकरण आ उदाहरण (एह से ई कबो अपना मूल तत्व सभ से बड़ ना हो जालीं) आ इनहन में हल्का शैली सभ के जोड़ल जाय-सब क्लास सभ के माध्यम से।
प्रतिक्रियाशील छवियन के बा
बूटस्ट्रैप में छवि के साथ रिस्पांसिव बनावल गइल बा .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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;