<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>
You don't need to remember all CSS classes. Just use the Bootstrap Editor instead.
/* _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;
}
Code copied to the clipboard.
Copying failed
/* _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 */