चित्राणि

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

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:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;