Buttons

Styles

The styles available are the standard theme colors; .primary, .secondary, .success, .warning, .danger, .info, .light, .dark and .beets.

For the rewgular style there is also a .link style to make a button look like a <a>.

Regular

.btn-{theme-color}.

<button class="btn btn-primary">...</button>

Alternative

.btn-alt-{theme-color}.

<button class="btn btn-alt-primary">...</button>

Ghost

.btn-ghost-{theme-color}.

<button class="btn btn-ghost-primary">...</button>

Outline

.btn-outline-{theme-color}.

<button class="btn btn-outline-primary">...</button>

Alternative shape

Force rounded or square shapes using the border utilities.

<button class="btn btn-primary rounded-0">A square button</button>
<button class="btn btn-secondary rounded-pill">A square button</button>
<button class="btn btn-ghost-primary rounded-0">A square button</button>
<button class="btn btn-ghost-secondary rounded-pill">A square button</button>

Sizes

<button class="btn btn-primary btn-sm">Small button</button>
<button class="btn btn-primary">Regular button</button>
<button class="btn btn-primary btn-lg">Large button</button>

Fixed aspect ratio

This is designed for use with an icon like FontAwsome, or short text like initials.

The width and height is the same and the padding is removed.

<button class="btn btn-aspect btn-primary mr-2"><i class="fa fa-user"></i></button>
<button class="btn btn-aspect rounded-circle btn-primary mr-2">JB</button>
<button class="btn btn-aspect rounded-circle btn-primary mr-2"><i class="fa fa-pen"></i></button>
<button class="btn btn-aspect rounded-0 btn-outline-primary mr-2"><i class="fa fa-trash"></i></button>
<button class="btn btn-aspect rounded-circle btn-ghost-secondary mr-2"><i class="fa fa-times"></i></button>
<button class="btn btn-aspect btn-beets btn-sm mr-2"><i class="fa fa-user fa-sm"></i></button>
<button class="btn btn-aspect btn-beets mr-2"><i class="fa fa-user"></i></button>
<button class="btn btn-aspect btn-beets btn-lg"><i class="fa fa-user fa-lg"></i></button>

Responsive

You can use breakpoints {sm|md|lg|xl} to decide when a button should have the aspect class.

Block buttons

<div class="d-grid gap-2">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>

Responsive

<div class="d-grid gap-2 d-md-block">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>

Using grid and flexbox

<div class="d-grid gap-2 col-6 mx-auto">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
    <button class="btn btn-primary" type="button">Button</button>
    <button class="btn btn-primary" type="button">Button</button>
</div>