Button groups

Series of buttons can be combined together into styled button groups.

• Button group component
  • Button styling
• Button group styling
  • Centered button groups
  • Justified button groups
  • Stacked button groups
  • Stacked block button groups
• Responsive button groups
• Scrollable button groups
• Radio button groups

---

Button group component

A button group is simply defined by wrapping a group of buttons inside a btn-group wrapper. Button groups can be used with all available button styles and should only be used with a tags, due to the styling limitations of the button tags.

It is good practice to use limited text on button labels, however, content will automatically wrap to a new line if required.

Code output

HTML Markup

Copy<div class="btn-group">
  <a class="btn btn-main">Button 1</a>
  <a class="btn btn-main">Button 2</a>
  <a class="btn btn-main">Button 3</a>
</div>

---

Button styling

All button styles and sizing properties, defined in the buttons section of this framework can be used in button groups, like in the following example.

Code output

HTML Markup

Copy<div class="btn-group">
  <a class="btn btn-sec btn-lg">Button 1</a>
  <a class="btn btn-sec btn-lg">Button 2</a>
  <a class="btn btn-sec btn-lg">Button 3</a>
</div>

---

Button group styling

Button groups can be styled with the use of predefined classes. Keep in mind that some variations might require changes to markup

---

Centered button groups

A button group by default is left-aligned. It can be centered simply by adding a btn-group-centered class on the button group component.

Code output

HTML Markup

Copy<div class="btn-group btn-group-centered">
  <a class="btn btn-main">Button 1</a>
  <a class="btn btn-main">Button 2</a>
  <a class="btn btn-main">Button 3</a>
</div>

---

Justified button groups

Applying a class btn-group-justified on a button group component, forces its buttons to stretch until they occupy all the available width, while each button is arbitrarily resized based on its content. Applying alongside a btn-group-equal forces the buttons to have the same width.

Code output

HTML Markup

Copy<div class="btn-group btn-group-justified">
  <a class="btn btn-sec">Button 1</a>
  <a class="btn btn-sec">Button 2</a>
  <a class="btn btn-sec">Big label button 3</a>
</div>

<div class="btn-group btn-group-justified btn-group-equal">
  <a class="btn btn-sec">Button 1</a>
  <a class="btn btn-sec">Button 2</a>
  <a class="btn btn-sec">Big label button 3</a>
</div>

---

Stacked button groups

Applying a class btn-group-stacked on a button group component, vertically stacks buttons and adjusts its width to the longest button.

Code output

HTML Markup

Copy<div class="btn-group btn-group-stacked">
  <a class="btn btn-main">Button 1</a>
  <a class="btn btn-main">Button 2</a>
  <a class="btn btn-main">Button 3</a>
</div>

---

Stacked block button groups

Applying a class btn-group-stacked-block alongside a btn-group-stacked button group component, vertically stacks buttons and adjusts its width to consume the full width of its parent container.

Code output

HTML Markup

Copy<div class="btn-group btn-group-stacked btn-group-stacked-block">
  <a class="btn btn-main">Button 1</a>
  <a class="btn btn-main">Button 2</a>
  <a class="btn btn-main">Button 3</a>
</div>

---

Responsive button groups

Responsive button group classes allow the button group component to be styled differently at each resolution tier depending on the applied resolution tier affix.

The responsive button group classes are defined as btn-group-{affix}-{modifier} where affix is one of the 6 responsive tier affixes xxs, xs, sm, md, lg, xl and where modifier is either centered, justified or stacked. The responsive button group classes are set only for the specified resolution tier.

In the following example a button group is justified at the extra small resolution tier from 545px up to 767px, and stacked at the extra extra small resolution tiers used for mobile device screens up to 544px. Notice that anchor ('a') tags are used because of the buttons limitation to be used with the justified feature.

Code output

HTML Markup

Copy<div class="btn-group btn-group-xxs-stacked btn-group-xs-justified">
  <a class="btn btn-main">Button 1</a>
  <a class="btn btn-main">Button 2</a>
  <a class="btn btn-main">Button 3</a>
</div>

---

Scrollable button groups

Placing a button group inside the following structure, allows long series of buttons to be horizontally scrolled. This feature only exists at resolution tiers ranging up to 991px, due to its awkward functionality on desktop devices, so it should be used with caution.

Code output

HTML Markup

Copy<div class="btn-group-scrollable">
  <div class="btn-group btn-group-centered">
    <a class="btn btn-main">Button 1</a>
    <a class="btn btn-main">Button 2</a>
    <a class="btn btn-main">Button 3</a>
    <a class="btn btn-main">Button 4</a>
    <a class="btn btn-main">Button 5</a>
  </div>
</div>

---

Radio button groups

Radio button sets can by styled within button groups to resemble buttons, while retaining default radio button functionality. To use radio button groups, simple use the following markup.

Radio button groups can make use of all the styling options available for normal button groups.

Code output

HTML Markup

Copy<div class="btn-group btn-group-xxs-stacked">
<label class="btn btn-main active">
  <input type="radio" name="radio" value="option1" checked>
  <span>Radio button one</span>
</label>
<label class="btn btn-main">
  <input type="radio" name="radio" value="option2">
  <span>Radio button two</span>
</label>
<label class="btn btn-main">
  <input type="radio" name="radio" value="option3">
  <span>Radio button three</span>
</label>
</div>