Source

छविहरू

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

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

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

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

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

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

हाम्रो बोर्डर-रेडियस उपयोगिताहरू बाहेक , तपाईंले .img-thumbnailछविलाई गोलाकार 1px किनारा उपस्थिति दिन प्रयोग गर्न सक्नुहुन्छ।

200x200 
<img src="..." alt="..." class="img-thumbnail">

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

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

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