آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

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

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

400x300400x300" style="box-sizing: border-box; vertical-align: middle; border-style: none; max-width: 100%; height: 300px; margin-bottom: 0.5rem; line-height: 1; color: rgb(33, 37, 41); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 16px; width: 400px; border-radius: 0.25rem !important;" /> 

 A caption for the above image.

 <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>

 

ترتیب دادن علامت رقم با استفاده از ابزارهای متن ما آسان است.

400x300400x300" />

 A caption for the above image.

 
 <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>