Bootstrap 4 Button Groups
Mục Lục
Bootstrap 4
Button Groups
Button Groups
Bootstrap 4 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:
Tip: Instead of applying button sizes to every button in a
group, use class .btn-group-lg
for a large button group or the .btn-group-sm
for a small button group:
Large Buttons:
Default Buttons:
Small Buttons:
Vertical Button Groups
Bootstrap 4 also supports vertical button groups:
Use the class .btn-group-vertical
to create a vertical button group:
Nesting Button Groups & Dropdown Menus
Tablet
Smartphone
Nest button groups to create dropdown menus (you will learn more about
dropdowns in a later chapter):
Example
<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-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>
Try it Yourself »
Split Button Dropdowns
Tablet
Smartphone
Vertical Button Group w/ Dropdown
Tablet
Smartphone
Example
<div class=”btn-group-vertical”>
<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-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>
Try it Yourself »
Button Groups Side by Side
Button groups are “inline” by default, which makes them appear side by side when you have multiple groups: