मुख्य सामग्रीवर जा डॉक्स नेव्हिगेशनवर जा
in English

प्रतिमा

प्रतिसादात्मक वर्तनामध्ये प्रतिमा निवडण्यासाठी दस्तऐवज आणि उदाहरणे (जेणेकरून ते त्यांच्या पालकांपेक्षा कधीच रुंद होत नाहीत) आणि त्यांना हलके शैली जोडा—सर्व वर्गांद्वारे.

या पृष्ठावर

प्रतिसादात्मक प्रतिमा

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

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

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

आमच्या सीमा-त्रिज्या युटिलिटिज.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;