Button group Since v1.1.0+

Button groups can be used to group a series of buttons together on a single line, either horizontally, or vertically. They can be created by wrapping buttons with a container with the class .btn-group.



Link 
<!-- First button group -->
<div class="btn-group" role="group" aria-label="Basic example">
  <button class="btn" type="button">Left</button>
  <button class="btn" type="button">Middle</button>
  <button class="btn" type="button">Right</button>
</div>

<!-- Second button group (used as pagination) -->
<div class="btn-group" role="group" aria-label="Button group as pagination">
  <!-- Previous page -->
  <button class="btn btn-square" type="button">
    <i class="fa fa-angle-left" aria-hidden="true"></i>
    <span class="sr-only">Previous page</span> <!-- sr-only = only for screen readers -->
  </button>
  <!-- Pages -->
  <button class="btn btn-square" type="button">1</button>
  <button class="btn btn-square" type="button">2</button>
  <button class="btn btn-square" type="button">3</button>
  <button class="btn btn-square" type="button">4</button>
  <button class="btn btn-square" type="button">5</button>
  <!-- Next page -->
  <button class="btn btn-square" type="button">
    <i class="fa fa-angle-right" aria-hidden="true"></i>
    <span class="sr-only">Next page</span> <!-- sr-only = only for screen readers -->
  </button>
</div>

<!-- Third button group -->
<div class="btn-group" role="group" aria-label="Another button group">
  <button class="btn" type="button">Button</button>
  <a href="#" class="btn" role="button">Link</a>
  <input class="btn btn-primary" type="submit" value="Submit">
</div>

Button groups have the display: inline-flex property. The ones in the above example are separated by <br /> tags. This is not shown in the code for the sake of conciseness. Also, all types of buttons can be used inside button groups, such as square buttons, and links or inputs styled as buttons, as can be seen above.

The elements with the .sr-only class are only displayed on screen readers. It gives sense in context to the icons. The icons being used are part of the Font Awesome 4.7.0 iconset.

Nesting for dropdown #

In order to use dropdowns inside button groups, a button group (with the classes .btn-group and .dropdown) can be nested inside another button group.

Header
Link 1 Link 2

Header
Link 1 Link 2 
<!-- Button group (with dropdown) -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button class="btn" type="button">Button</button>
  <button class="btn" type="button">Button</button>
  <div class="btn-group dropdown with-arrow" role="group">
    <button class="btn btn-square" data-toggle="dropdown" type="button" id="dropdown-toggle-btn-1" aria-haspopup="true" aria-expanded="false">
      <i class="fa fa-angle-down" aria-hidden="true"></i>
      <span class="sr-only">Open dropdown</span> <!-- sr-only = only for screen readers -->
    </button>
    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="dropdown-toggle-btn-1">
      <h6 class="dropdown-header">Header</h6>
      <a href="#" class="dropdown-item">Link 1</a>
      <a href="#" class="dropdown-item">Link 2</a>
      <div class="dropdown-divider"></div>
      <div class="dropdown-content">
        <button class="btn btn-block" type="button">Button</button>
      </div>
    </div>
  </div>
</div>

<!-- Another button group (with dropright) -->
<div class="btn-group" role="group" aria-label="Another button group with nested dropdown">
  <button class="btn" type="button">Action</button>
  <div class="btn-group dropdown dropright with-arrow" role="group">
    <button class="btn btn-square" data-toggle="dropdown" type="button" id="dropdown-toggle-btn-2" aria-haspopup="true" aria-expanded="false">
      <i class="fa fa-angle-right" aria-hidden="true"></i>
      <span class="sr-only">More actions</span> <!-- sr-only = only for screen readers -->
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdown-toggle-btn-2">
      ...
    </div>
  </div>
</div>

When using a nested button group as a dropdown, it is very important to remember that the .dropdown class must be added to it. Everything else is the same for dropdowns, and all types of variations can be used here. To learn more, go to the dropdown section (opens in new tab) of the docs.

Sizing #

Different sizes of button groups are also available:

  • Large button groups can be created by adding the .btn-group-lg class to the container.
  • Small button groups can be created by adding the .btn-group-sm class to the container.


<!-- Large button group -->
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
  <button class="btn" type="button">Left</button>
  <button class="btn" type="button">Middle</button>
  <button class="btn" type="button">Right</button>
</div>

<!-- Regular button group -->
<div class="btn-group" role="group" aria-label="Regular button group">
  ...
</div>

<!-- Small button group -->
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
  ...
</div>

Button toolbar #

Sets of button groups can be combined into button toolbars by wrapping them in a container with the class .btn-toolbar. Moreover, button groups can also be combined with input groups. 

<!-- First button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with sets of button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button class="btn btn-square" type="button">1</button>
    <button class="btn btn-square" type="button">2</button>
  </div>
  <div class="btn-group ml-10" role="group" aria-label="Second group"> <!-- ml-10 = margin-left: 1rem (10px) -->
    <button class="btn btn-square" type="button">41</button>
    <button class="btn btn-square" type="button">42</button>
  </div>
</div>

<!-- Second button toolbar -->
<div class="btn-toolbar mt-10" role="toolbar" aria-label="Toolbar with button group and input group"> <!-- mt-10 = margin-top: 1rem (10px) -->
  <div class="btn-group" role="group" aria-label="First group">
    <button class="btn btn-square" type="button">1</button>
    <button class="btn btn-square" type="button">2</button>
  </div>
  <div class="input-group ml-10"> <!-- ml-10 = margin-left: 1rem (10px) -->
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>

<!-- Third button toolbar -->
<div class="btn-toolbar mt-10 p-5 bg-light-lm bg-very-dark-dm rounded" role="toolbar" aria-label="Another toolbar with button group and input group"> <!-- mt-10 = margin-top: 1rem (10px), p-5 = padding: 0.5rem (5px), bg-light-lm = background-color: var(--gray-color-light) only in light mode, bg-very-dark-dm = background-color: var(--dark-color-dark) only in dark mode, rounded = rounded corners -->
  <div class="btn-group" role="group" aria-label="First group">
    <button class="btn btn-square" type="button">1</button>
    <button class="btn btn-square" type="button">2</button>
  </div>
  <div class="input-group ml-auto"> <!-- ml-auto = margin-left: auto -->
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>
</div>
In the third toolbar in the above example, the input group is pushed to the right using the .ml-auto class because button toolbars are based on flexbox.

Vertical button group #

Buttons can also be grouped vertically by wrapping them in a container with the class .btn-group-vertical. Everything else discussed on this page applies here as well, including nesting for dropdowns, and sizing.

Header
Link 1 Link 2
Header
Link 1 Link 2 
<!-- Vertical button group -->
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
  ...
</div>

<!-- Small vertical button group -->
<div class="btn-group-vertical btn-group-sm" role="group" aria-label="Small vertical button group">
  ...
</div>
Up next: Collapse
On this page
Button group Nesting for dropdown Sizing Button toolbar Vertical button group

Help us grow

Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.

However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.

Gold sponsor

The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)

Sponsors

The following is the normal tier, with a maximum of 10 sponsors.

Backers

The following people have generously decided to support Halfmoon.

Subscribe for updates


  • We will notify you when the framework gets a substantial update. No spam or marketing.
  • You can also follow us on Twitter and stay updated that way.
halfmoon-logo halfmoon-logo-white

Get in touch

Legal

Made with for developers

Scroll to top
© Copyright 2024, Halfmoon UI