Source

బొమ్మలు

బూట్‌స్ట్రాప్‌లో ఫిగర్ కాంపోనెంట్‌తో సంబంధిత ఇమేజ్‌లు మరియు టెక్స్ట్‌లను ప్రదర్శించడానికి డాక్యుమెంటేషన్ మరియు ఉదాహరణలు.

మీరు ఎప్పుడైనా ఐచ్ఛిక శీర్షికతో చిత్రం వంటి కంటెంట్ భాగాన్ని ప్రదర్శించాల్సిన అవసరం ఉంది, ఉపయోగించడాన్ని పరిగణించండి <figure>.

HTML5 మరియు మూలకాల కోసం కొన్ని బేస్‌లైన్ శైలులను అందించడానికి చేర్చబడిన .figure, .figure-imgమరియు తరగతులను ఉపయోగించండి. బొమ్మల్లోని చిత్రాలకు స్పష్టమైన పరిమాణాలు లేవు, కాబట్టి ప్రతిస్పందించేలా చేయడానికి మీ తరగతికి జోడించాలని నిర్ధారించుకోండి ..figure-caption<figure><figcaption>.img-fluid<img>

400x300
పై చిత్రానికి శీర్షిక.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

మా టెక్స్ట్ యుటిలిటీలతో ఫిగర్ యొక్క శీర్షికను సమలేఖనం చేయడం సులభం .

400x300
పై చిత్రానికి శీర్షిక.
<figure class="figure">
  <img src="..." class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>