চিত্ৰসমূহ

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

বুটষ্ট্ৰেপত ছবিসমূহ ৰ সৈতে সঁহাৰিজনক কৰা হয় .img-fluid। ই প্ৰযোজ্য max-width: 100%;আৰু height: auto;ছবিখনত যাতে ই মূল প্ৰস্থৰ সৈতে স্কেল কৰে।

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

ছবিৰ থাম্বনেইল

আমাৰ border-radius utilities ৰ উপৰিও , আপুনি .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;