ছবি

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

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

বুটস্ট্র্যাপের চিত্রগুলি এর সাথে প্রতিক্রিয়াশীল করা হয় .img-fluid। max-width: 100%;এবং height: auto;চিত্রটিতে প্রয়োগ করা হয় যাতে এটি মূল উপাদানের সাথে স্কেল করে।

<img src="..." class="img-fluid" alt="Responsive image">

ছবির থাম্বনেল

আমাদের সীমানা-ব্যাসার্ধের ইউটিলিটিগুলি.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>