Source

छविहरू

तस्बिरहरूलाई जवाफदेही व्यवहारमा छनौट गर्नका लागि कागजात र उदाहरणहरू (त्यसैले तिनीहरू आफ्ना अभिभावक तत्वहरूभन्दा कहिल्यै ठूला नहोस्) र तिनीहरूमा हल्का शैलीहरू थप्नुहोस्—सबै कक्षाहरू मार्फत।

उत्तरदायी छविहरू

बुटस्ट्र्यापमा छविहरू सँग उत्तरदायी बनाइन्छ .img-fluid। max-width: 100%;र height: auto;छविमा लागू गरिन्छ ताकि यो अभिभावक तत्वसँग स्केल हुन्छ।

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG छविहरू र IE 10

Internet Explorer 10 मा, SVG छविहरू .img-fluidअसमान आकारका छन्। यसलाई ठीक गर्न, width: 100% \9;आवश्यक भएमा थप्नुहोस्। यो फिक्सले अन्य छवि ढाँचाहरूलाई अनुचित रूपमा आकार दिन्छ, त्यसैले बुटस्ट्र्यापले यसलाई स्वचालित रूपमा लागू गर्दैन।

छवि थम्बनेलहरू

हाम्रो सीमा-त्रिज्य उपयोगिताहरू बाहेक , तपाईंले .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="..." alt="..." class="img-thumbnail">

छविहरू पङ्क्तिबद्ध गर्दै

हेल्पर फ्लोट कक्षाहरू वा पाठ पङ्क्तिबद्ध वर्गहरूसँग छविहरू पङ्क्तिबद्ध गर्नुहोस् । -स्तर छविहरू मार्जिन उपयोगिता वर्ग प्रयोग गरेरblock केन्द्रित गर्न सकिन्छ ।.mx-auto

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