Bootstrap 5 উপযোগী টুল

ইউটিলিটি / হেলপার শ্রেণী

Bootstrap 5-এর অনেক ইউটিলিটি/হেলপার শ্রেণী আছে, যা কোনো CSS কোড ব্যবহার না করেই এলিমেন্টের শৈলী সমাযোজন করার জন্য দ্রুতগতিতে কাজ করতে পারে。

বর্তনী

বর্তনী শ্রেণী ব্যবহার করে এলিমেন্টের বর্তনী যোগ কিংবা অপসারণ করুন:

প্রয়োগ

<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ক্ষেত্র প্রশস্ততা

ব্যবহার .border-1 থেকে .border-5 ক্ষেত্র প্রশস্ততা পরিবর্তন করতে:

প্রয়োগ

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ক্ষেত্র রঙ

কোনো কোনো কন্টেক্স্ট ক্ষেত্র রঙ ক্লাস ব্যবহার করে ক্ষেত্রে রঙ যোগ করুন:

প্রয়োগ

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ক্ষেত্র গোলাকার

ব্যবহার rounded এলিমেন্টকে গোলাকার ক্ষেত্র যোগ করুন:

প্রয়োগ

<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
<span class="rounded-1"></span>
<span class="rounded-2"></span>
<span class="rounded-3"></span>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

ফ্লটিং এবং ফ্লটিং নিরসন

ব্যবহার .float-end ফ্লটিং করা ক্লাস বা .float-start সংলগ্নকে ফ্লটিং করা এবং .clearfix ফ্লটিং নিরসন ক্লাস:

প্রয়োগ

<div class="clearfix">
  <span class="float-start">সংলগ্নকে ফ্লটিং</span>
  <span class="float-end">ডানদিকে ফ্লটিং</span>
</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

প্রতিক্রিয়াসম্পন্ন ফ্লটিং

স্ক্রিন প্রস্থতি অনুযায়ী ডানদিকে বা সংলগ্নকে ফ্লটিং করতে, প্রতিক্রিয়াসম্পন্ন ফ্লটিং ক্লাস ব্যবহার করুন (.float-*-left|right) যেখানে * হলো:

  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

প্রয়োগ

<div class="float-sm-end">ছোট স্ক্রিন বা আরও বড় স্ক্রিনে ডানদিকে ফ্লটিং</div><br>
<div class="float-md-end">মাঝারি স্ক্রিন বা আরও বড় স্ক্রিনে ডানদিকে ফ্লটিং</div><br>
<div class="float-lg-end">বড় স্ক্রিন বা আরও বড় স্ক্রিনে ডানদিকে ফ্লটিং</div><br>
<div class="float-xl-end">অতি-বড় স্ক্রিন বা আরও বড় স্ক্রিনে ডানদিকে ফ্লটিং</div><br>
<div class="float-xxl-end">বিশেষ বড় স্ক্রিন বা আরও বড় স্ক্রিনে ডানদিকে ফ্লটিং</div><br>
<div class="float-none">ফ্লটিং না করা</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

মধ্যে অবস্থান

ব্যবহার .mx-auto ক্লাস মধ্যে অবস্থান করা এলাকা (মার্গিন-লেফট এবং মার্গিন-রাইট: অটো):

প্রয়োগ

<div class="mx-auto bg-warning" style="width:150px">কেন্দ্রীভূত</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

প্রশস্ততা

w-* শ্রেণী ব্যবহার করে (.w-25、.w-50、.w-75、.w-100、.mw-auto、.mw-100）উপাদানের প্রশস্ততা সংযোজন:

প্রয়োগ

<div class="w-25 bg-warning">প্রশস্ততা 25%</div>
<div class="w-50 bg-warning">প্রশস্ততা 50%</div>
<div class="w-75 bg-warning">প্রশস্ততা 75%</div>
<div class="w-100 bg-warning">প্রশস্ততা 100%</div>
<div class="w-auto bg-warning">স্বনিয়মিত প্রশস্ততা</div>
<div class="mw-100 bg-warning">সর্বোচ্চ প্রশস্ততা 100%</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

উচ্চতা

h-* শ্রেণী ব্যবহার করে (.h-25、.h-50、.h-75、.h-100、.mh-auto、.mh-100）উপাদানের উচ্চতা সংযোজন:

প্রয়োগ

<div style="height:200px;background-color:#ddd">
  <div class="h-25 bg-warning">উচ্চতা 25%</div>
  <div class="h-50 bg-warning">উচ্চতা 50%</div>
  <div class="h-75 bg-warning">উচ্চতা 75%</div>
  <div class="h-100 bg-warning">উচ্চতা 100%</div>
  <div class="h-auto bg-warning">স্বনিয়মিত উচ্চতা</div>
  <div class="mh-100 bg-warning" style="height:500px">সর্বোচ্চ উচ্চতা 100%</div>
</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

স্পেসিং

Bootstrap 5 একটি বিস্তৃত প্রতিক্রিয় মার্জিন ও প্যাডিং প্রয়োগী শ্রেণী সহ রয়েছে। তা সকল ব্রেকপইন্টের জন্য প্রযোজ্য:

  • xs (<= 576px)
  • sm (> = 576px)
  • md (> = 768px)
  • lg (> = 992px)
  • xl (> = 1200px)
  • xxl (> = 1400px)

এই শ্রেণীগুলির ব্যবহার ফরম্যাট হল:{প্রকৃতি}{পাশ}-{মাপ} ব্যবহার করা হয় xs، এবং {প্রকৃতি}{পাশ}-{breakpoint}-{মাপ} ব্যবহার করা হয় sm、md、lg、xl এবং xxl。

প্রকৃতি হয় এমন একটি

  • m - সেট করা মার্গিন
  • p - সেট করা প্যাডিং

পাশ হয় এমন একটি

  • t - সেট করা মার্গিন-উপর বা প্যাডিং-উপর
  • b - সেট করা মার্গিন-নীচে বা প্যাডিং-নীচে
  • s - সেট করা মার্গিন-বাম বা প্যাডিং-বাম
  • e - সেট করা মার্গিন-ডান বা প্যাডিং-ডান
  • x - একসাথে সেট করা প্যাডিং-বাম এবং প্যাডিং-ডান বা মার্গিন-বাম এবং মার্গিন-ডান
  • y - একসাথে সেট করা প্যাডিং-উপর এবং প্যাডিং-নীচে বা মার্গিন-উপর এবং মার্গিন-নীচে
  • খালি - উপাদানের চারটি পাশেই সেট করা হয় মার্গিন বা প্যাডিং

মাপ হয় এমন একটি

  • 0 - প্রতিস্থাপন মার্গিন বা প্যাডিং সেট করা হয়েছে 0
  • 1 - প্রতিস্থাপন মার্গিন বা প্যাডিং সেট করা হয়েছে .25rem
  • 2 - প্রতিস্থাপন মার্গিন বা প্যাডিং সেট করা হয়েছে .5rem
  • 3 - প্রতিস্থাপন মার্গিন বা প্যাডিং সেট করা হয়েছে 1rem
  • 4 - প্রতিস্থাপন মার্গিন বা প্যাডিং সেট করা হয়েছে 1.5rem
  • 5 - প্রতিস্থাপন মার্গিন বা প্যাডিং সেট করা হয়েছে 3rem
  • auto - প্রতিস্থাপন মার্গিন সেট করা হয়েছে auto

প্রয়োগ

<div class="pt-4 bg-warning">আমি শুধুমাত্র উপর অভ্যন্তরীণ মাঝারি (1.5rem) আছি</div>
<div class="p-5 bg-success">আমি সমস্ত পাশে (3rem) অভ্যন্তরীণ মাঝারি আছি</div>
<div class="m-5 pb-5 bg-info">আমি সমস্ত পাশে (3rem) এবং নীচে অভ্যন্তরীণ মাঝারি (3rem) আছি</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

আরও বিস্তৃত সাপেক্ষিক মাপকাঠিতে

.m-# / m-*-# সমস্ত পাশের বাহ্যিক মাঝারি চেষ্টা করুন
.mt-# / mt-*-# উপর বাহ্যিক মাঝারি চেষ্টা করুন
.mb-# / mb-*-# নীচে বাহ্যিক মাঝারি চেষ্টা করুন
.ms-# / ms-*-# বাম বাহ্যিক মাঝারি চেষ্টা করুন
.me-# / me-*-# ডান বাহ্যিক মাঝারি চেষ্টা করুন
.mx-# / mx-*-# ডান এবং বাম অভ্যন্তরীণ মাঝারি চেষ্টা করুন
.my-# / my-*-# উপর এবং নীচে বাহ্যিক মাঝারি চেষ্টা করুন
.p-# / p-*-# সমস্ত পাশের অভ্যন্তরীণ মাঝারি (পুলিং) চেষ্টা করুন
.pt-# / pt-*-# উপর অভ্যন্তরীণ মাঝারি চেষ্টা করুন
.pb-# / pb-*-# নীচে অভ্যন্তরীণ মাঝারি চেষ্টা করুন
.ps-# / ps-*-# বাম অভ্যন্তরীণ মাঝারি চেষ্টা করুন
.pe-# / pe-*-# ডান অভ্যন্তরীণ মাঝারি চেষ্টা করুন
.py-# / py-*-# উপর এবং নীচে অভ্যন্তরীণ মাঝারি চেষ্টা করুন
.px-# / px-*-# ডান এবং বাম অভ্যন্তরীণ মাঝারি চেষ্টা করুন

আমাদের CSS ইউনিট রেফারেন্স ম্যানুয়েল রেম এবং বিভিন্ন মাপকাঠিতে সংক্রান্ত বিষয় আরও পড়ুন।

শৃঙ্গার

请使用 shadow- শ্রেণীটি উপাদানকে শৃঙ্গার সাথে যুক্ত করুন:

প্রয়োগ

<div class="shadow-none p-4 mb-4 bg-light">নীল ছাড়া</div>

小型阴影


默认阴影


大型阴影

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

垂直对齐

请使用 align- 类更改元素的对齐方式（仅适用于 inline、 inline-block、inline-table 和表格单元格元素）：

প্রয়োগ

baseline
top
middle
bottom
text-top
text-bottom

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

纵横比

根据父级的宽度创建响应式视频或幻灯片。

将 .ratio 类与您选择的纵横比 .aspect-ratio-* পার্যন্ত এলিমেন্টে যোগ করে এবং এতে এম্বেডড (ভিডিও বা iframe) যোগ করুন:

প্রয়োগ

<!-- Aspect ratio 1:1 -->
<div class="ratio ratio-1x1">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 4:3 -->
<div class="ratio ratio-4x3">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 16:9 -->
<div class="ratio ratio-16x9">
  <iframe src="shanghai.mp4"></iframe>
</div>
<!-- Aspect ratio 21:9 -->
<div class="ratio ratio-21x9">
  <iframe src="shanghai.mp4"></iframe>
</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

দৃশ্যমানতা

ব্যবহার .visible বা .invisible শ্রেণীগুলি এলিমেন্টের দৃশ্যমানতা নিয়ন্ত্রণ করতে পারে:

মন্তব্য:এই শ্রেণীগুলি CSS display মান পরিবর্তন করবে না।তারা শুধুমাত্র যোগ করে visibility:visible বা visibility:hidden。

প্রয়োগ

<div class="visible">I am visible.</div>
<div class="invisible">I am invisible.</div>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

বন্ধ আইকন

ব্যবহার .btn-close শ্রেণীটি বন্ধ আইকনের শৈলী সেট করতে পারে। সাধারণত অলার্ট বক্স এবং মডালের জন্য ব্যবহৃত হয়。

প্রয়োগ

<button type="button" class="btn-close"></button>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

স্ক্রিন রিডার

ব্যবহার .visually-hidden শ্রেণী সকল ডিভাইসের জন্য ইলেমেন্টকে ছুঁপতে পারে, স্ক্রিন রিডার ছাড়া:

প্রয়োগ

<span class="visually-hidden">I will be hidden on all screens except for screen readers.</span>

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

রঙ

যেমন 'রঙ' চপ্তির মতো, নিচে সমস্ত টেক্সট এবং প্রবণ রঙ শ্রেণীগুলির তালিকা দেওয়া হল:

টেক্সট রঙের জন্য শ্রেণী হল:

  • .text-muted
  • .text-primary
  • .text-success
  • .text-info
  • .text-warning
  • .text-danger
  • .text-secondary
  • .text-white
  • .text-dark
  • .text-body（ডিফল্ট বডি রঙ / সাধারণত কালো হয়）
  • .text-light

প্রয়োগ

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

কনটেক্স্ট টেক্সট শ্রেণীও লিঙ্কের জন্য ব্যবহার করা যেতে পারে:

প্রয়োগ

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

আপনি .text-black-50 বা .text-white-50 শ্রেণী ব্যবহার করে কালো বা সাদা টেক্সটের 50% অস্তিত্ব যোগ করতে পারেন:

প্রয়োগ

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

প্রবণ রঙ

প্রবণ রঙের জন্য শ্রেণী হল:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

পরিপ্রেক্ষ্যভাবে, প্রবণ রঙ টেক্সট রঙ সেট করতে পারে না, তাই কিছু কিছু ক্ষেত্রে, আপনাকে তাদের সঙ্গে .text-* শ্রেণী একসঙ্গে ব্যবহার করা

প্রয়োগ

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন