Button group
Button groups can be used to group together related buttons on a single line, either horizontally or vertically.
Create amazing Typeform-like forms and pages just by writing Markdown!
Examples #
You can group together buttons by putting them in a container with .btn-group
. This supports all types of button variants, including outline ones. Links (styled as buttons) can also be grouped together as an alternative to the navigation components.
HTML
<!-- Basic button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Item 1</button>
<button type="button" class="btn btn-secondary">Item 2</button>
<button type="button" class="btn btn-secondary">Item 3</button>
</div>
<!-- Mixed button group -->
<div class="btn-group" role="group" aria-label="Mixed example">
<button type="button" class="btn btn-primary">Item 1</button>
<button type="button" class="btn btn-secondary">Item 2</button>
<button type="button" class="btn btn-secondary">Item 3</button>
</div>
<!-- Outline button group -->
<div class="btn-group" role="group" aria-label="Outline example">
<button type="button" class="btn btn-outline-primary">Item 1</button>
<button type="button" class="btn btn-outline-primary">Item 2</button>
<button type="button" class="btn btn-outline-primary">Item 3</button>
</div>
<!-- Link button group -->
<div class="btn-group" role="group" aria-label="Link example">
<a href="#" class="btn btn-primary active" aria-current="page">Item 1</a>
<a href="#" class="btn btn-primary">Item 2</a>
<a href="#" class="btn btn-primary">Item 3</a>
</div>
Accessibility
Button groups require an appropriaterole
attribute and explicit label to ensure assistive technologies like screen readers identify buttons as grouped and announce them. Use role="group"
for button groups or role="toolbar"
for button toolbars. Then use aria-label
or aria-labelledby
to label them.
Checkbox and radio button groups #
Group together checkbox and radio toggle buttons into a seamless looking button group.
HTML
<!-- Checkbox button group -->
<div class="btn-group" role="group" aria-label="Checkbox button group">
<input type="checkbox" class="btn-check" id="example-checkbox-1" autocomplete="off">
<label class="btn btn-outline-primary" for="example-checkbox-1">Python</label>
<input type="checkbox" class="btn-check" id="example-checkbox-2" autocomplete="off">
<label class="btn btn-outline-primary" for="example-checkbox-2">JavaScript</label>
<input type="checkbox" class="btn-check" id="example-checkbox-3" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="example-checkbox-3">C++</label>
</div>
<!-- Radio button group -->
<div class="btn-group" role="group" aria-label="Radio button group">
<input type="radio" name="radio-group-1" class="btn-check" id="example-radio-1" autocomplete="off">
<label class="btn btn-outline-primary" for="example-radio-1">Back-end</label>
<input type="radio" name="radio-group-1" class="btn-check" id="example-radio-2" autocomplete="off">
<label class="btn btn-outline-primary" for="example-radio-2">Front-end</label>
<input type="radio" name="radio-group-1" class="btn-check" id="example-radio-3" autocomplete="off" disabled>
<label class="btn btn-outline-primary" for="example-radio-3">Full-stack</label>
</div>
Button toolbar #
Multiple button groups can be grouped together by putting them inside a container with the .btn-toolbar
class. You can also put input groups inside button toolbars to create more complex components. In any case, you will need to use utility classes to space out buttons, groups, and more. Also remember to add role="toolbar"
to the toolbar.
HTML
<!-- Basic button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar basic example">
<div class="btn-group" role="group" aria-label="Group one">
<button type="button" class="btn btn-secondary">Item 1</button>
<button type="button" class="btn btn-secondary">Item 2</button>
</div>
<div class="btn-group ms-2" role="group" aria-label="Group two">
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
</div>
<!-- Button toolbar with input group -->
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with input group">
<div class="btn-group" role="group" aria-label="Group one">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
</div>
<div class="input-group">
<span class="input-group-text" id="add-on-1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="add-on-1">
</div>
</div>
Sizing #
Create small and large button groups with the .btn-group-sm
and .btn-group-lg
classes respectively.
HTML
<!-- Small button group -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-primary">Item 1</button>
<button type="button" class="btn btn-secondary">Item 2</button>
<button type="button" class="btn btn-secondary">Item 3</button>
</div>
<!-- Regular button group -->
<div class="btn-group" role="group" aria-label="Regular button group">
<button type="button" class="btn btn-primary">Item 1</button>
<button type="button" class="btn btn-secondary">Item 2</button>
<button type="button" class="btn btn-secondary">Item 3</button>
</div>
<!-- Large button group -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-primary">Item 1</button>
<button type="button" class="btn btn-secondary">Item 2</button>
<button type="button" class="btn btn-secondary">Item 3</button>
</div>
Nesting #
Place a .btn-group
within another .btn-group
when you want dropdown menus mixed with a series of buttons. This is a very handy way to abstract away less important actions into a menu that opens on click.
HTML
<!-- Button group with nested dropdown -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-secondary">View</button>
<button type="button" class="btn btn-secondary">Edit</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
More
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Move</a></li>
<li><a class="dropdown-item" href="#">Share</a></li>
<li><a class="dropdown-item" href="#">Archive</a></li>
</ul>
</div>
</div>
Vertical variation #
You can also group buttons together vertically (as opposed to horizontally) using .btn-group-vertical
. While nested dropdown menus are supported here, split button dropdowns are not. Everything else listed on this page (including checkbox and radio button groups) is supported.
Each button inside a vertical button group will take up the same width as the widest item. However, you can manually set a width to the container using inline CSS or a utility class.
HTML
<!-- Vertical button group with nested dropdown -->
<div class="btn-group-vertical" style="width: 200px;" role="group" aria-label="Vertical button group with nested dropdown">
<button type="button" class="btn btn-secondary text-start px-3">View</button>
<button type="button" class="btn btn-secondary text-start px-3">Edit</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-secondary text-start px-3 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
More
</button>
<ul class="dropdown-menu w-100">
<li><a class="dropdown-item" href="#">Move</a></li>
<li><a class="dropdown-item" href="#">Share</a></li>
<li><a class="dropdown-item" href="#">Archive</a></li>
</ul>
</div>
</div>
Help us grow
Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.
You can email us directly if you have any queries. We are always happy to answer.
Subscribe for updates
We will notify you when the framework gets a substantial update. No spam ever.
Follow us on Twitter so that you can stay updated that way.