Bootstrap 5 ছবি
- পূর্ববর্তী পৃষ্ঠা BS5 টেবিল
- পরবর্তী পৃষ্ঠা BS5 Jumbotron
চিত্র আকৃতি
গোলাকার
.rounded ক্লাস চিত্রকে গোলাকার করবে:
উদাহরণ
<img src="flower.jpg" class="rounded" alt="Flower">
বৃত্তাকার
.rounded-circle ক্লাস চিত্রকে বৃত্তাকার রূপায়িত করবে:
উদাহরণ
<img src="flower.jpg" class="rounded-circle" alt="Cinque Terre">
ক্ষুদ্রবিন্দু
.img-thumbnail ক্লাস চিত্রকে ক্ষুদ্রবিন্দু হিসাবে রূপায়িত করবে (ফাঁদ দিয়ে):
উদাহরণ
<img src="flower.jpg" class="img-thumbnail" alt="Cinque Terre">
একইভাবে
চিত্রকে .float-start ক্লাস চিত্রকে ডানদিকে ফ্লট করবে, বা .float-end ডানদিকে ফ্লট
উদাহরণ
<img src="tulip.jpg" class="float-start"> <img src="tulip.jpg" class="float-end">
কেন্দ্রীভূত চিত্র
চিত্রকে কেন্দ্রীভূত করতে, আমরা utility ক্লাস যোগ করেছি .mx-auto (margin:auto) এবং .d-block (display:block)：
উদাহরণ
<img src="tulip.jpg" class="mx-auto d-block">
প্রতিক্রিয়াসম্পর্কীয় চিত্র
চিত্র বিভিন্ন মাপের হতে পারে।স্ক্রিনও এমনই।প্রতিক্রিয়াসম্পর্কীয় চিত্রটি স্ক্রিনের মাপ অনুযায়ী স্বয়ংক্রিয়ভাবে সজ্জিত হবে。
চিত্রকে .img-fluid ক্লাস যোগ করুন <img> ট্যাগ দ্বারা প্রতিক্রিয়াসম্পর্কীয় চিত্র তৈরি করুন।তারপর চিত্র পারদর্শী হয়ে ফাদার ইলিমেন্টের মধ্যে সম্পূর্ণভাবে সজ্জিত হবে。
.img-fluid চিত্রকে অ্যাপ্লাই করার জন্য max-width: 100%; এবং height: auto; ：
উদাহরণ
<img class="img-fluid" src="tiyugongyuan.jpg" alt="New York">
- পূর্ববর্তী পৃষ্ঠা BS5 টেবিল
- পরবর্তী পৃষ্ঠা BS5 Jumbotron
