شرح صفوف ومحتوى الفقرة
في المقالات التعليمية والتقارير الهندسية تحتاج إلى إرفاق شرح نصي أسفل الرسم أو الصورة بحيث يدرك محرك البحث وقارئ الشاشة ارتباطهما الوثيق. توفر حزمة الأشكال التوضيحية في بوتستراب 5 ثلاثة كلاسات متكاملة: .figure على وسم <figure>، و.figure-img مع .img-fluid على الصورة، و.figure-caption على وسم التسمية <figcaption>.
يمنح كلاس .figure-img الصورة هامشاً سفلياً محسوباً يفصلها بأناقة عن نص الوصف، بينما ينسق .figure-caption التسمية بحجم خط هادئ متناسق.
HTML
<figure class="figure">
<img src="/images/examples/studio-workspace.webp"
class="figure-img img-fluid rounded"
alt="Dual monitor studio workspace">
<figcaption class="figure-caption">
Figure 2: Clean dual-display development desk.
</figcaption>
</figure>