Bootstrap 5 বাটন গোষ্ঠী

বাটন গোষ্ঠী

Bootstrap 5 আপনাকে বাটন গোষ্ঠীতে একসাথে একসারি বাটনগুলো কম্বাইন করার অনুমতি দেয় (একটি সারিতে):

ব্যবহার করুন যেমন: .btn-group ক্লাস <div> এলিমেন্টকে ব্যবহার করে বাটন গোষ্ঠী তৈরি করুন:

উদাহরণ

<div class="btn-group">
  <button type="button" class="btn btn-primary">হয়ওয়ে</button>
  <button type="button" class="btn btn-primary">ডজিং</button>
  <button type="button" class="btn btn-primary">হোমিক</button>
</div>

আপনার নিজেই চেষ্টা করুন

সুঝানা:বাটন আকার গোষ্ঠীর প্রত্যেক বাটনে লাগানোর পরিবর্তে, শুধুমাত্র ক্লাস .btn-group-lg বড় বাটন গোষ্ঠীকে ব্যবহার করুন বা .btn-group-sm ক্ষুদ্র বাটন গোষ্ঠীর জন্য:

উদাহরণ

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">হয়ওয়ে</button>
  <button type="button" class="btn btn-primary">ডজিং</button>
  <button type="button" class="btn btn-primary">হোমিক</button>
</div>

আপনার নিজেই চেষ্টা করুন

ভিক্টরিয়াল বাটন গ্রুপ

বুটস্ট্রপ ৫ ভিক্টরিয়াল বাটন গ্রুপও সমর্থন করে:

ক্লাস ব্যবহার করুন .btn-group-vertical ভিক্টরিয়াল বাটন গ্রুপ তৈরি করুন:

উদাহরণ

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">হয়ওয়ে</button>
  <button type="button" class="btn btn-primary">ডজিং</button>
  <button type="button" class="btn btn-primary">হোমিক</button>
</div>

আপনার নিজেই চেষ্টা করুন

পারস্পরিকভাবে প্রদর্শিত বাটন গ্রুপ

ডিফল্ট ভাবে, বাটন গ্রুপ "inline" হয়, বেশ কয়েকটি বাটন গ্রুপ থাকলে তারা পারস্পরিকভাবে প্রদর্শিত হয়:

উদাহরণ

<div class="btn-group">
  <button type="button" class="btn btn-primary">হয়ওয়ে</button>
  <button type="button" class="btn btn-primary">ডজিং</button>
  <button type="button" class="btn btn-primary">হোমিক</button>
</div>
<div class="btn-group">
  <button type="button" class="btn btn-primary">জিরি</button>
  <button type="button" class="btn btn-primary">চাংচাং</button>
  <button type="button" class="btn btn-primary">হোংকাই</button>
</div>

আপনার নিজেই চেষ্টা করুন

নিম্নলিখিত বিভাগ

নিম্নলিখিত বিভাগে নানা শিক্ষা দেওয়া হবে (ড্রপডাউন বিষয়ের বিস্তারিত শিক্ষা আসবে):

উদাহরণ

<div class="btn-group">
  <button type="button" class="btn btn-primary">হয়ওয়ে</button>
  <button type="button" class="btn btn-primary">ডজিং</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">হোমিক</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">মোবাইল</a>
      <a class="dropdown-item" href="#">ট্যাবলেট</a>
    </div>
  </div>
</div>

আপনার নিজেই চেষ্টা করুন