گاهی لازمه چندتا دکمه کنار هم باشن و مثل یه واحد عمل کنن. اینجاست که از btn-group استفاده می‌کنیم.

📌 1. گروه دکمه ساده

<div class="btn-group" role="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>

🔹 این کد سه دکمه آبی رو به صورت یک گروه نمایش میده.

📌 2. گروه دکمه با سایز متفاوت

<div class="btn-group btn-group-lg" role="group">
  <button type="button" class="btn btn-secondary">بزرگ</button>
  <button type="button" class="btn btn-secondary">بزرگ</button>
</div>

<div class="btn-group btn-group-sm mt-2" role="group">
  <button type="button" class="btn btn-secondary">کوچک</button>
  <button type="button" class="btn btn-secondary">کوچک</button>
</div>

📌 3. گروه عمودی (Vertical Button Group)

<div class="btn-group-vertical" role="group">
  <button type="button" class="btn btn-info">دکمه ۱</button>
  <button type="button" class="btn btn-info">دکمه ۲</button>
  <button type="button" class="btn btn-info">دکمه ۳</button>
</div>

🔹 دکمه‌ها به صورت ستونی نمایش داده میشن.

📌 4. گروه دکمه با Dropdown

<div class="btn-group" role="group">
  <button type="button" class="btn btn-success">اصلی</button>
  <button type="button" class="btn btn-success dropdown-toggle" data-bs-toggle="dropdown">
    منو
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">گزینه ۱</a></li>
    <li><a class="dropdown-item" href="#">گزینه ۲</a></li>
    <li><a class="dropdown-item" href="#">گزینه ۳</a></li>
  </ul>
</div>

🔹 با این کد یه دکمه اصلی داری و کنارش یه منوی کشویی.

✨ خلاصه:

• btn-group → گروه افقی دکمه‌ها

• btn-group-lg و btn-group-sm → تغییر سایز

• btn-group-vertical → گروه عمودی

• میشه Dropdown رو هم داخل گروه اضافه کرد