मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

इमेजिस

छवियों को प्रतिक्रियाशील व्यवहार में चुनने के लिए दस्तावेज़ीकरण और उदाहरण (ताकि वे कभी भी अपने माता-पिता से अधिक व्यापक न हों) और उनमें हल्की शैली जोड़ें—सभी कक्षाओं के माध्यम से।

उत्तरदायी छवियां

बूटस्ट्रैप में छवियों को उत्तरदायी बनाया जाता है .img-fluidmax-width: 100%;यह और छवि पर लागू होता height: auto;है ताकि यह मूल चौड़ाई के साथ बढ़े।

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

छवि थंबनेल

हमारी सीमा-त्रिज्या उपयोगिताओं के.img-thumbnail अतिरिक्त, आप किसी छवि को गोल 1px बॉर्डर स्वरूप देने के लिए उपयोग कर सकते हैं ।

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

छवियों को संरेखित करना

छवियों को हेल्पर फ्लोट क्लासेस या टेक्स्ट अलाइनमेंट क्लासेस के साथ संरेखित करें । block-लेवल इमेज को मार्जिन यूटिलिटी क्लास का उपयोग करके.mx-auto केंद्रित किया जा सकता है ।

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">
Placeholder 200x200
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200
<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;