in English

চিত্ৰসমূহ

প্ৰতিক্ৰিয়াশীল আচৰণলৈ প্ৰতিমুৰ্তিসমূহ নিৰ্বাচন কৰাৰ বাবে নথিপত্ৰ আৰু উদাহৰণসমূহ (গতিকে সিহত কেতিয়াও সিহতৰ মূল উপাদানসমূহতকৈ ডাঙৰ নহয়) আৰু সিহতত লঘু শৈলীসমূহ যোগ কৰক—সকলো শ্ৰেণীসমূহৰ যোগেদি।

প্ৰতিক্ৰিয়াশীল ছবি

বুটষ্ট্ৰেপত ছবিসমূহ ৰ সৈতে সঁহাৰিজনক কৰা হয় .img-fluid। max-width: 100%;আৰু height: auto;ছবিখনত প্ৰয়োগ কৰা হয় যাতে ই মূল উপাদানৰ সৈতে স্কেল কৰে।

Placeholder Responsive image 
<img src="..." class="img-fluid" alt="...">
SVG ছবি আৰু ইণ্টাৰনেট এক্সপ্ল’ৰাৰ

Internet Explorer 10 আৰু 11 ত, SVG ছবিসমূহৰ সৈতে .img-fluidঅসমতাপূৰ্ণ আকাৰৰ। এইটো ঠিক কৰিবলৈ, য'ত প্ৰয়োজন হয় width: 100%;তাত যোগ কৰক। .w-100এই সমাধানে অন্য প্ৰতিমুৰ্তি বিন্যাসসমূহৰ আকাৰ ভুলকৈ দিয়ে, গতিকে Bootstrap এ ইয়াক স্বয়ংক্ৰিয়ভাৱে প্ৰয়োগ নকৰে ।

ছবিৰ থাম্বনেইল

আমাৰ border-radius utilities ৰ উপৰিও , আপুনি .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-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>