HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:
Use a <div>
element with class .btn-group
to create a button group:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
.btn-group-lg
for a large button group or the .btn-group-sm
for a small button group:
Large Buttons:
Default Buttons:
Small Buttons:
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Bootstrap 5 also supports vertical button groups:
Use the class .btn-group-vertical
to create a vertical button group:
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Nest button groups to create dropdown menus (you will learn more about dropdowns in a later chapter):
<div class="btn-group">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn
btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown">Sony</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>