चित्राणि
प्रतिक्रियाशीलव्यवहारे चित्राणि चयनार्थं दस्तावेजीकरणं उदाहरणानि च (अतः ते कदापि स्वस्य मातापितृतत्त्वेभ्यः बृहत्तराः न भवन्ति) तथा च तेषु लघुशैल्याः योजयन्ति-सर्वं वर्गद्वारा।
प्रतिक्रियाशील छवियाँ
Bootstrap इत्यस्मिन् चित्राणि .img-fluid. max-width: 100%;तथा height: auto;च प्रतिबिम्बे प्रयुक्ताः भवन्ति येन सा मातापितृतत्त्वेन सह स्केल भवति।
<img src="..." class="img-fluid" alt="...">SVG चित्राणि तथा Internet Explorer इति
Internet Explorer 10 तथा 11 इत्यस्मिन् SVG इमेज्स् with .img-fluidअसमानुपातिकरूपेण आकारिताः सन्ति । एतत् समाधातुं यत्र आवश्यकं तत्र width: 100%;वा योजयन्तु । .w-100एतत् निराकरणम् अन्येषां चित्रस्वरूपाणां आकारं अनुचितं करोति, अतः Bootstrap स्वयमेव तत् न प्रयोजयति ।
चित्र लघुचित्र
अस्माकं border-radius utilities इत्यस्य अतिरिक्तं , भवान् .img-thumbnailएकं चित्रं गोलरूपेण 1px सीमारूपं दातुं उपयोक्तुं शक्नोति ।
<img src="..." class="img-thumbnail" alt="...">चित्राणां संरेखणं करणम्
सहायक प्लवकवर्गैः अथवा पाठसंरेखणवर्गैः सह चित्राणि संरेखयन्तु | -स्तरस्य चित्राणि मार्जिन उपयोगिता वर्गस्य उपयोगेनblock केन्द्रीकृत्य स्थापयितुं शक्यन्ते ..mx-auto
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="..."><img src="..." class="rounded mx-auto d-block" alt="..."><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>