मुखेल आशयाचेर वचचें डॉक्स नेव्हिगेशनाचेर वचचें
in English

प्रतिमा

प्रतिसाद दिवपी वागणूकांत प्रतिमा निवडपा खातीर दस्तावेजीकरण आनी उदाहरणां (म्हणून तीं केन्नाच तांच्या पालक घटकां परस व्हड जायनात) आनी तांकां हलके वजनाचीं शैलीं जोडचीं-सगलीं वर्गां वरवीं.

प्रतिसाद दिवपी प्रतिमा

बूटस्ट्रॅपांतली प्रतिमा प्रतिसाद दिवपी केल्यात .img-fluid. हें लागू जाता max-width: 100%;आनी height: auto;प्रतिमेक जेणे करून ती पालक घटका वांगडा स्केल करता.

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

प्रतिमा लघुप्रतिमा

In addition to our 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;