Source

चित्राणि

प्रतिक्रियाशीलव्यवहारे चित्राणि चयनार्थं दस्तावेजीकरणं उदाहरणानि च (अतः ते कदापि स्वस्य मातापितृतत्त्वेभ्यः बृहत्तराः न भवन्ति) तथा च तेषु लघुशैल्याः योजयन्ति-सर्वं वर्गद्वारा।

प्रतिक्रियाशील छवियाँ

Bootstrap इत्यस्मिन् चित्राणि .img-fluid. max-width: 100%;तथा height: auto;च प्रतिबिम्बे प्रयुक्ताः भवन्ति येन सा मातापितृतत्त्वेन सह स्केल भवति।

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG चित्राणि तथा IE 10

Internet Explorer 10 इत्यस्मिन् SVG इमेज्स् with .img-fluidअसमानुपातिकरूपेण आकारिताः सन्ति । एतत् समाधातुं width: 100% \9;यत्र आवश्यकं तत्र योजयन्तु । एतत् निराकरणम् अन्येषां चित्रस्वरूपाणां आकारं अनुचितं करोति, अतः Bootstrap स्वयमेव तत् न प्रयोजयति ।

चित्र लघुचित्र

अस्माकं border-radius utilities इत्यस्य अतिरिक्तं , भवान् .img-thumbnailएकं चित्रं गोलरूपेण 1px सीमारूपं दातुं उपयोक्तुं शक्नोति ।

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200 
<img src="..." alt="..." class="img-thumbnail">

चित्राणां संरेखणं करणम्

सहायक प्लवकवर्गैः अथवा पाठसंरेखणवर्गैः सह चित्राणि संरेखयन्तु | -स्तरस्य चित्राणि मार्जिन उपयोगिता वर्गस्य उपयोगेनblock केन्द्रीकृत्य स्थापयितुं शक्यन्ते ..mx-auto

Placeholder 200x200 Placeholder 200x200 
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
Placeholder 200x200 
<img src="..." class="rounded mx-auto d-block" alt="...">
Placeholder 200x200 
<div class="text-center">
  <img src="..." class="rounded" alt="...">
</div>

चित्र

यदि भवान् विशिष्टस्य कृते <picture>बहुधा तत्त्वानि निर्दिष्टुं तत्त्वस्य उपयोगं करोति तर्हि वर्गान् टैग् मध्ये न योजयितुं सुनिश्चितं कुर्वन्तु ।<source><img>.img-*<img><picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>