گروه دکمه
سبک گروه دکمه پیش فرض
<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" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">چپ</button>
<button type="button" class="btn btn-warning">وسط</button>
<button type="button" class="btn btn-success">راست</button>
</div>
گروه دکمه
سبک گروه دکمه پیش فرض
<div class="btn-group">
<button type="button" class="btn btn-outline-primary">چپ</button>
<button type="button" class="btn btn-outline-primary">وسط</button>
<button type="button" class="btn btn-outline-primary">راست</button>
</div>
گروه های دکمه چک باکس
سبک گروه های دکمه چک باکس پیش فرض
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1">
<label class="btn btn-outline-primary" for="btncheck1">چک باکس 1</label>
<input type="checkbox" class="btn-check" id="btncheck2">
<label class="btn btn-outline-primary" for="btncheck2">چک باکس 2</label>
<input type="checkbox" class="btn-check" id="btncheck3">
<label class="btn btn-outline-primary" for="btncheck3">چک باکس 3</label>
</div>
گروه های دکمه رادیویی
سبک گروه های دکمه رادیویی پیش فرض
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label class="btn btn-outline-primary" for="btnradio1">رادیو 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">رادیو 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-primary" for="btnradio3">رادیو 3</label>
</div>
نوار ابزار دکمه
سبک نوار ابزار دکمه پیش فرض
<div class="btn-group me-2 mb-2">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2 mb-2">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group mb-2">
<button type="button" class="btn btn-primary">8</button>
</div>
اندازه دکمه
سبک اندازه دکمه پیش فرض
<div class="btn-group mb-2 btn-group-lg">
<button class="btn btn-primary" type="button">چپ</button>
<button class="btn btn-primary" type="button">وسط</button>
<button class="btn btn-primary" type="button">راست</button>
</div>
<div class="btn-group mb-2">
<button class="btn btn-primary" type="button">چپ</button>
<button class="btn btn-primary" type="button">وسط</button>
<button class="btn btn-primary" type="button">راست</button>
</div>
<div class="btn-group mb-2 btn-group-sm">
<button class="btn btn-primary" type="button">چپ</button>
<button class="btn btn-primary" type="button">وسط</button>
<button class="btn btn-primary" type="button">راست</button>
</div>
تودرتوی دکمه
سبک تودرتوی دکمه پیش فرض
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">کشویی</button>
<div class="dropdown-menu"><a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
<a class="dropdown-item" href="javascript:void(0);">لینک کشویی</a>
</div>
</div>
</div>
تنوع عمودی
سبک تغییرات عمودی دکمه پیشفرض
<div class="btn-group-vertical">
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
</div>
تنوع کشویی عمودی
سبک تغییرات عمودی دکمه پیشفرض
<div aria-label="Vertical button group" role="group" class="btn-group-vertical">
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">دکمه</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
<a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
</div>
</div>
<button class="btn btn-primary" type="button">دکمه</button>
<button class="btn btn-primary" type="button">دکمه</button>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">دکمه</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
<a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
</div>
</div>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">دکمه</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
<a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
</div>
</div>
<div role="group" class="btn-group">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle" type="button">دکمه</button>
<div class="dropdown-menu"><a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
<a href="javascript:void(0);" class="dropdown-item">لینک کشویی</a>
</div>
</div>
</div>