Button-Groups

button-group

.button-group

.button-group divides the contained buttons into equally sized parts. Here the programmatically more simple variant buttons-{n} (e.g. buttons-4 for four buttons in the group) is availabe as well as the number as word for manual programming (e.g. four for four buttons in the group)

<div class="button-group">
    <!-- Buttons -->
</div>

Button Button Button Button

<div class="clearfix">
    <div class="left button-group">
        <!-- Buttons -->
    </div>
    <div class="right button-group">
        <!-- Buttons -->
    </div>
</div>

Button Button Button Button

Button Button

<div class="vertical button-group">
    <!-- Buttons -->
</div>

Button Button Button Button

Mobile Vertical

By adding the class stackable instead of vertical the button-group becomes vertical for mobile devices up to 768px, only.

buttons

.buttons

.buttons divides the contained buttons into equally sized parts. Here the programmatically more simple variant buttons-{n} (e.g. buttons-4 for four buttons in the group) is available as well as the number as word for manual programming (e.g. four for four buttons in the group)

<div class="buttons-4 buttons">
    <!-- buttons -->
</div>
<div class="four buttons">
    <!-- buttons -->
</div>

Button Button Button Button

In order to remove the distance between the buttons, the class no-space can be complemented.

<div class="buttons-4 no-space buttons">
    <!-- buttons -->
</div>
<div class="four no-space buttons">
    <!-- buttons -->
</div>

Button Button Button Button

Vertical button group:

<div class="buttons-4 vertical buttons">
    <!-- buttons -->
</div>
<div class="vertical buttons">
    <!-- buttons -->
</div>

Button Button Button Button

and without distance:

Button Button Button

Buttons can be vertical for smartphones as well, by assigning the class stackable to the group:

Button Button Button Button

button-toolbar

<div class="button-toolbar">
    <div class="left button-group">
        <button class="primary button">
            <span>primary</span>
        </button>
        <button class="secondary button">
            <span>secondary</span>
        </button>
        <button class="info button">
            <span>info</span>
        </button>
    </div>
    <div class="right button-group">
        <button class="info button">
            <span>primary</span>
        </button>
        <button class="default button">
            <span>secondary</span>
        </button>
        <button class="default button">
            <span>info</span>
        </button>
    </div>
</div>

primary secondary info

primary secondary info

Toolbar mit .bg-inverted

default default disabled active

Compact toolbar with less padding through &.compact

default active default