Bootstrap class: .btn-group

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

Preview

Check .btn-group in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Open in Visual Editor →

Tips 💡

You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.

Sass source

/* _button-group.scss:30 */
.btn-group + .btn-group {
  margin-left: -$btn-border-width;
}

/* _button-group.scss:46 */
.btn-group {
  > .btn:first-child {
    margin-left: 0;
  }

  // Reset rounded corners
  > .btn:not(:last-child):not(.dropdown-toggle),
  > .btn-group:not(:last-child) > .btn {
    @include border-right-radius(0);
  }

  > .btn:not(:first-child),
  > .btn-group:not(:first-child) > .btn {
    @include border-left-radius(0);
  }
}

/* _button-group.scss:103 */
.btn-group.show .dropdown-toggle {
  @include box-shadow($btn-active-box-shadow);

  // Show no shadow for `.btn-link` since it has no other button styles.
  &.btn-link {
    @include box-shadow(none);
  }
}

/* _button-group.scss:123 */
.btn-group {
  width: 100%;
}

/* _button-group.scss:162 */
> .btn-group > .btn {
  margin-bottom: 0; // Override default `<label>` value

  input[type="radio"],
  input[type="checkbox"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
  }

Uses variables

/* _button-group.scss:30 */
$btn-border-width

/* _button-group.scss:46 */


/* _button-group.scss:103 */
$btn-active-box-shadow

/* _button-group.scss:123 */


/* _button-group.scss:162 */