चित्राणि
प्रतिक्रियाशीलव्यवहारे चित्राणि चयनार्थं दस्तावेजीकरणं उदाहरणानि च (अतः ते कदापि स्वस्य मातापितृभ्यः व्यापकाः न भवन्ति) तथा च तेषु लघुशैल्याः योजयितुं-सर्वं वर्गद्वारा।
प्रतिक्रियाशील छवियाँ
Bootstrap इत्यस्मिन् चित्राणि .img-fluid. max-width: 100%;एतत् प्रतिबिम्बे च प्रवर्तते height: auto;येन मातापितृविस्तारेण सह स्केल भवति ।
<img src="..." class="img-fluid" alt="...">चित्र लघुचित्र
अस्माकं border-radius utilities इत्यस्य अतिरिक्तं , भवान् .img-thumbnailएकं चित्रं गोलरूपेण 1px सीमारूपं दातुं उपयोक्तुं शक्नोति ।
<img src="..." class="img-thumbnail" alt="...">चित्राणां संरेखणं करणम्
सहायकप्लववर्गैः अथवा पाठसंरेखणवर्गैः सह चित्राणि संरेखयन्तु | -स्तरस्य चित्राणि मार्जिन उपयोगिता वर्गस्य उपयोगेनblock केन्द्रीकृत्य स्थापयितुं शक्यन्ते ..mx-auto
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>
सस्स
चर
चित्रस्य लघुचित्रस्य कृते चराः उपलभ्यन्ते ।
$thumbnail-padding: .25rem;
$thumbnail-bg: $body-bg;
$thumbnail-border-width: $border-width;
$thumbnail-border-color: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;