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

आंकड़ों

बूटस्ट्रैप में आकृति घटक के साथ संबंधित छवियों और पाठ को प्रदर्शित करने के लिए दस्तावेज़ीकरण और उदाहरण।

इस पृष्ठ पर

जब भी आपको सामग्री का एक टुकड़ा प्रदर्शित करने की आवश्यकता हो - जैसे कि एक वैकल्पिक कैप्शन वाली छवि, एक का उपयोग करने पर विचार करें <figure>

HTML5 और तत्वों के लिए कुछ आधारभूत शैलियाँ प्रदान करने के लिए शामिल और कक्षाओं का .figureउपयोग करें .figure-img। आंकड़ों में छवियों का कोई स्पष्ट आकार नहीं होता है, इसलिए इसे प्रतिक्रियाशील बनाने के लिए कक्षा को अपने साथ जोड़ना सुनिश्चित करें ।.figure-caption<figure><figcaption>.img-fluid<img>

Placeholder 400x300
उपरोक्त छवि के लिए एक कैप्शन।
एचटीएमएल
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

हमारे टेक्स्ट यूटिलिटीज के साथ फिगर के कैप्शन को संरेखित करना आसान है ।

Placeholder 400x300
उपरोक्त छवि के लिए एक कैप्शन।
एचटीएमएल
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="...">
  <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
</figure>

सास

चर

$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;