ছবি

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

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

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

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

আমাদের সীমানা-ব্যাসার্ধের ইউটিলিটিগুলি.img-thumbnail ছাড়াও, আপনি একটি চিত্রকে একটি বৃত্তাকার 1px বর্ডার চেহারা দিতে ব্যবহার করতে পারেন ।

<img src="..." class="img-thumbnail" alt="...">

ইমেজ সারিবদ্ধ করা

হেল্পার ফ্লোট ক্লাস বা টেক্সট অ্যালাইনমেন্ট ক্লাসের সাথে ছবি সারিবদ্ধ করুন । block-স্তরের চিত্রগুলি মার্জিন ইউটিলিটি ক্লাস ব্যবহার করে.mx-auto কেন্দ্রীভূত করা যেতে পারে ।

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" 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>

সস

ভেরিয়েবল

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

$thumbnail-padding:                 .25rem;
$thumbnail-bg:                      $body-bg;
$thumbnail-border-width:            $border-width;
$thumbnail-border-color:            var(--#{$prefix}border-color);
$thumbnail-border-radius:           $border-radius;
$thumbnail-box-shadow:              $box-shadow-sm;