Sections

Button groups

Button groups are commonly used for pagination elements and voting buttons on Article pages.

Usage

Use .button-group on an element that contains two or more .button elements to create a button group.

<div class="button-group mb-4" role="group">
  <button class="button button-outline-primary">
    <svg class="svg-icon" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path d="M330,512 C261,512 152,489 126,470 C119,466 116,459 116,452 L116,234 C116,228 119,221 124,217 C126,216 165,185 206,163 C256,135 291,96 300,71 C310,41 324,0 370,0 C392,0 409,12 419,33 C438,77 418,137 384,184 C407,189 434,196 451,201 C482,211 502,233 506,260 C510,288 496,317 467,338 C445,397 408,489 380,504 C370,510 352,512 330,512 Z M161,439 C203,456 333,475 358,465 C370,454 403,379 426,316 C428,312 431,308 434,305 C453,293 462,278 461,266 C459,256 450,248 437,243 C409,234 340,219 339,219 C331,218 325,212 322,204 C319,196 321,188 327,183 C377,129 386,73 377,51 C374,45 372,45 370,45 C359,45 354,52 342,86 C329,125 282,171 227,201 C201,216 174,235 161,245 L161,439 Z M73,454 L73,232 C73,211 57,195 37,195 C16,195 0,211 0,232 L0,454 C0,474 16,490 36,490 C56,490 73,474 73,454 Z"></path>
    </svg>
  </button>
  <button class="button button-outline-primary">
    <svg class="svg-icon" viewBox="0 0 507 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <path d="M177,0 C247,0 355,23 382,42 C388,46 391,53 391,60 L391,278 C391,284 388,291 383,295 C381,296 342,327 302,349 C251,377 216,416 208,441 C197,471 183,512 137,512 C115,512 98,500 88,479 C69,435 89,375 123,328 C100,323 73,316 56,311 C26,301 5,279 1,252 C-3,224 11,195 41,174 C63,116 100,23 127,8 C137,2 155,0 177,0 Z M346,73 C304,56 174,37 149,47 C137,58 104,133 81,196 C79,200 76,204 73,207 C54,219 45,234 46,246 C48,256 57,264 70,269 C98,278 167,293 168,293 C176,294 182,300 185,308 C188,316 186,324 180,329 C130,383 121,439 130,461 C133,467 135,467 137,467 C148,467 153,460 165,426 C178,387 225,341 280,311 C306,296 333,277 346,267 L346,73 Z M434,58 L434,280 C434,300 450,316 470,316 C491,316 507,300 507,280 L507,58 C507,38 491,22 470,22 C450,22 434,38 434,58 Z"></path>
    </svg>
  </button>
</div>

<div class="mb-4" role="toolbar" aria-label="Toolbar with button groups">
  <div class="button-group mr-2" role="group" aria-label="First group">
    <button class="button button-outline-primary">1</button>
    <button class="button button-outline-primary">2</button>
    <button class="button button-outline-primary">3</button>
    <button class="button button-outline-primary">4</button>
  </div>
  <div class="button-group mr-2" role="group" aria-label="Second group">
    <button class="button button-outline-primary">5</button>
    <button class="button button-outline-primary">6</button>
    <button class="button button-outline-primary">7</button>
  </div>
  <div class="button-group" role="group" aria-label="Third group">
    <button class="button button-outline-primary">8</button>
  </div>
</div>

<div class="button-group mb-4" role="group" aria-label="Basic example">
  <button class="button button-outline-primary">Left</button>
  <button class="button button-outline-primary">Middle</button>
  <button class="button button-outline-primary">Right</button>
</div>

Sizes

Use .button-group-{size} with an existing .button-group to resize each .button in the group automatically.



<div class="button-group button-group-lg" role="group" aria-label="...">...</div>
<div class="button-group" role="group" aria-label="...">...</div>
<div class="button-group button-group-sm" role="group" aria-label="...">...</div>

Variants

Use .button-group-vertical to stack .button elements vertically rather than horizontally.

<div class="button-group-vertical">...</div>