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>