Skip to content Skip to main navigation Report an accessibility issue

Button Groups

Documentation

Do
  • Keep button labels as short and descriptive as possible.
Don't
  • Be consistent. Don’t use multiple styles.
  • Keep small screens in mind. Wide button groups will break on small screens.
EXAMPLE


Explore Majors and Careers

Code

HTML
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

<p><br /></p>

<p><a href="" class="btn btn-default btn-block">Explore Majors and Careers</a></p>
Available as a shortcode in the WordPress theme
[button-group ][button  link="#"]Label[/button][button  link="#"]Label[/button][/button-group]

[button-group  justified="true"][button  link="#"]Label[/button][button  link="#"]Label[/button][/button-group]
[button block="true" link="#"]Block Button[/button]