ButtonGroup

Contrast Bootstrap Buttons are components that trigger wanted user interactions. They are easy to customize in terms of their size, shape and color.

Examples of Bootstrap button group use:

Group of pricing options
Group of licenses you can purchase on our CDB Pro page

Basic Button Groups

html

<button type="button" class="btn btn-primary">Click me</button>
<button type="button" class="btn btn-secondary">Click me</button>
<button type="button" class="btn btn-info">Click me</button>
<button type="button" class="btn btn-success">Click me</button>
<button type="button" class="btn btn-danger">Click me</button>
<button type="button" class="btn btn-warning">Click me</button>

Basic Circular Groups

html

<button type="button" class="btn btn-rounded btn-warning">
  Left
</button>
<button type="button" class="btn btn-rounded btn-success">
  Middle
</button>
<button type="button" class="btn btn-rounded btn-secondary">
  Right
</button>

Basic Button Groups in Different Groups

html

  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-warning">
      Left
    </button>
    <button type="button" class="btn btn-success">
      Middle
    </button>
    <button type="button" class="btn btn-secondary">
      Right
    </button>
  </div>
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-info">
      Left
    </button>
    <button type="button" class="btn btn-dark">
      Middle
    </button>
    <button type="button" class="btn btn-danger">
      Right
    </button>
  </div>

Vertical Button Groups

Make a set of buttons appear vertically stacked rather than horizontally.

html

<div
class="btn-group-vertical"
role="group"
aria-label="Basic example"
>
<button type="button" class="btn btn-primary">Click me</button>
<button type="button" class="btn btn-secondary">Click me</button>
<button type="button" class="btn btn-info">Click me</button>
<button type="button" class="btn btn-success">Click me</button>
<button type="button" class="btn btn-danger">Click me</button>
<button type="button" class="btn btn-warning">Click me</button>
</div>

Different Sizing for Button Groups

html

  <div
    class="btn-group btn-group-lg"
    role="group"
    aria-label="Basic example"
  >
    <button type="button" class="btn btn-dark">button</button>
    <button type="button" class="btn btn-dark">button</button>
    <button type="button" class="btn btn-dark">button</button>
  </div>
  <div
    class="btn-group"
    role="group"
    aria-label="Basic example"
  >
    <button type="button" class="btn btn-light">button</button>
    <button type="button" class="btn btn-light">button</button>
    <button type="button" class="btn btn-light">button</button>
  </div>
  <div
    class="btn-group btn-group-sm"
    role="group"
    aria-label="Basic example"
  >
    <button type="button" class="btn btn-dark">button</button>
    <button type="button" class="btn btn-dark">button</button>
    <button type="button" class="btn btn-dark">button</button>
  </div>

ButtonToolbar

Button