मुख्य सामग्री पर जाएँ docs नेविगेशनं प्रति गच्छतु
in English

चित्राणि

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

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

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

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

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

अस्माकं 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="..." class="img-thumbnail" alt="...">

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

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

Placeholder 200x200 Placeholder 200x200
<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>

सस्स

चर

चित्रस्य लघुचित्रस्य कृते चराः उपलभ्यन्ते ।

$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;