Source

ছবি

প্রতিক্রিয়াশীল আচরণে ছবিগুলিকে বেছে নেওয়ার জন্য ডকুমেন্টেশন এবং উদাহরণ (তাই তারা কখনই তাদের মূল উপাদানগুলির চেয়ে বড় না হয়) এবং সেগুলিতে হালকা শৈলী যোগ করুন - সমস্ত ক্লাসের মাধ্যমে৷

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

বুটস্ট্র্যাপের ছবিগুলি এর সাথে প্রতিক্রিয়াশীল করা হয় .img-fluidmax-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>