স্কিপ করে মূল কন্টেন্ট এ যাও ডক্স নেভিগেশন এড়িয়ে যান
in English

ছবি

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

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

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

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

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

আমাদের সীমানা-ব্যাসার্ধের ইউটিলিটিগুলি.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-start" alt="...">
<img src="..." class="rounded float-end" 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>

সস

ভেরিয়েবল

ভেরিয়েবল ইমেজ থাম্বনেল জন্য উপলব্ধ.

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            $gray-300;
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;