ছবি
প্রতিক্রিয়াশীল আচরণে ছবিগুলিকে বেছে নেওয়ার জন্য ডকুমেন্টেশন এবং উদাহরণ (তাই তারা কখনই তাদের মূল উপাদানগুলির চেয়ে বড় না হয়) এবং সেগুলিতে হালকা শৈলী যোগ করুন - সমস্ত ক্লাসের মাধ্যমে৷
প্রতিক্রিয়াশীল ছবি
বুটস্ট্র্যাপের ছবিগুলি এর সাথে প্রতিক্রিয়াশীল করা হয় .img-fluid। max-width: 100%;এবং height: auto;চিত্রটিতে প্রয়োগ করা হয় যাতে এটি মূল উপাদানের সাথে স্কেল করে।
<img src="..." class="img-fluid" alt="Responsive image">SVG ছবি এবং IE 10
ইন্টারনেট এক্সপ্লোরার 10-এ, SVG চিত্রগুলি .img-fluidঅসামঞ্জস্যপূর্ণ আকারের। width: 100% \9;এটি ঠিক করতে, যেখানে প্রয়োজন সেখানে যোগ করুন । এই ফিক্সটি অন্য ইমেজ ফরম্যাটকে ভুলভাবে মাপ করে, তাই বুটস্ট্র্যাপ স্বয়ংক্রিয়ভাবে এটি প্রয়োগ করে না।
ছবির থাম্বনেল
আমাদের সীমানা-ব্যাসার্ধের ইউটিলিটিগুলি.img-thumbnail ছাড়াও, আপনি একটি চিত্রকে একটি বৃত্তাকার 1px সীমানা উপস্থিতি দিতে ব্যবহার করতে পারেন ৷
<img src="..." alt="..." class="img-thumbnail">ইমেজ সারিবদ্ধ
হেল্পার ফ্লোট ক্লাস বা টেক্সট অ্যালাইনমেন্ট ক্লাসের সাথে ছবি সারিবদ্ধ করুন । block-স্তরের চিত্রগুলি মার্জিন ইউটিলিটি ক্লাস ব্যবহার করে.mx-auto কেন্দ্রীভূত করা যেতে পারে ।
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="..."><img src="..." class="rounded mx-auto d-block" alt="..."><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>