চিত্ৰসমূহ
প্ৰতিক্ৰিয়াশীল আচৰণলৈ প্ৰতিমুৰ্তিসমূহ নিৰ্বাচন কৰাৰ বাবে নথিপত্ৰ আৰু উদাহৰণসমূহ (গতিকে সিহত কেতিয়াও সিহঁতৰ পিতৃতকৈ বহল নহয়) আৰু সিহতত লঘু শৈলীসমূহ যোগ কৰক—সকলো শ্ৰেণীসমূহৰ যোগেদি।
প্ৰতিক্ৰিয়াশীল ছবি
বুটষ্ট্ৰেপত ছবিসমূহ ৰ সৈতে সঁহাৰিজনক কৰা হয় .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: $gray-300;
$thumbnail-border-radius: $border-radius;
$thumbnail-box-shadow: $box-shadow-sm;