Source

تصويرون

تصويرن کي جوابي رويي ۾ چونڊڻ لاءِ دستاويز ۽ مثال (انهي ڪري اهي ڪڏهن به پنهنجي والدين جي عنصرن کان وڏا نه ٿين) ۽ انهن ۾ هلڪو وزن وارو انداز شامل ڪريو- سڀ ڪلاسن ذريعي.

جوابي تصويرون

بوٽ اسٽريپ ۾ تصويرن کي جوابي سان ٺاهيو ويو آهي .img-fluid. max-width: 100%;۽ height: auto;تصوير تي لاڳو ڪيا ويا آهن ته جيئن اهو ماپيندڙ عنصر سان ماپ ڪري.

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="Responsive image">
SVG تصويرون ۽ IE 10

انٽرنيٽ ايڪسپلورر 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>