छवियां
प्रतिक्रियाशील व्यवहार च छवियें गी चुनने आस्तै दस्तावेजीकरण ते उदाहरण (इस करी ओह् कदें बी अपने माता-पिता कोला व्यापक नेईं होन) ते उंदे च हल्की शैलियें गी जोड़ना-एह् सब किश कक्षाएं दे राहें।
प्रतिक्रियाशील छवियां
बूटस्ट्रैप च छवियां गी .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;