Buttons

Styles

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>

Alternative styles

<button class="btn btn-primary-alt">Primary</button>
<button class="btn btn-secondary-alt">Secondary</button>
<button class="btn btn-success-alt">Success</button>
<button class="btn btn-warning-alt">Warning</button>
<button class="btn btn-danger-alt">Danger</button>
<button class="btn btn-info-alt">Info</button>
<button class="btn btn-light-alt">Light</button>
<button class="btn btn-dark-alt">Dark</button>

Outlined

<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-warning">Warning</button>
<button class="btn btn-outline-danger">Danger</button>
<button class="btn btn-outline-info">Info</button>
<button class="btn btn-outline-light">Light</button>
<button class="btn btn-outline-dark">Dark</button>

Alternative shape

Force rounded or square shapes using the border utilities.

<button class="btn btn-primary">A square button</button>
<button class="btn btn-secondary rounded-pill">A square button</button>
<button class="btn btn-primary-alt">A square button</button>
<button class="btn btn-secondary-alt 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"><i class="fa fa-user"></i></button>
<button class="btn btn-aspect rounded-circle btn-primary">JB</button>
<button class="btn btn-aspect btn-outline-primary"><i class="fa fa-trash"></i></button>
<button class="btn btn-aspect rounded-circle btn-primary"><i class="fa fa-pen"></i></button>
<button class="btn btn-aspect rounded-circle btn-secondary-alt"><i class="fa fa-times"></i></button>
<button class="btn btn-aspect rounded-0 btn-sm btn-primary"><i class="fa fa-times"></i></button>
<button class="btn btn-aspect btn-lg btn-primary"><i class="fa fa-times"></i></button>

Block buttons

A block button is a large button that spans 100% of the parent.

The responsive block button is only shown as a block on small screen sizes (< 578px). Otherwise it is shown as a regular sized button. Use .btn-sm or .btn-lg to set other default sizes.

<button class="btn btn-block btn-primary btn-sm">Block button</button>
<button class="btn btn-block-resp btn-lg btn-primary">Responsive block button</button>