Source

ارقام

مستندات و نمونه هایی برای نمایش تصاویر و متن های مرتبط با کامپوننت شکل در بوت استرپ.

هر زمان که نیاز به نمایش بخشی از محتوا داشتید - مانند یک تصویر با شرح اختیاری، استفاده از یک متن را در نظر بگیرید <figure>.

از کلاس‌های گنجانده شده .figureو .figure-imgبرای .figure-captionارائه برخی سبک‌های پایه برای HTML5 <figure>و <figcaption>عناصر استفاده کنید. تصاویر در شکل ها اندازه واضحی ندارند، بنابراین حتما .img-fluidکلاس را به خود اضافه کنید <img>تا پاسخگو باشد.

400x300
شرح تصویر بالا 
<figure class="figure">
  <img src=".../400x300" 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=".../400x300" 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>