Buttons

Primary Secondary Success Warning Danger Info Light Dark Link

<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>

Primary Secondary Success Warning Danger Info Light Dark

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

Primary Secondary Success Warning Danger Info Light Dark

<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>

Force rounded or square shapes using the border utilities.

A square button A rounded button A square button A rounded button

<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-alt-primary rounded-0">A square button</button>
<button class="btn btn-alt-secondary rounded-pill">A square button</button>

Small button Regular button Large button

<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>

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.

JB

<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 btn-outline-primary mr-2"><i class="fa fa-trash"></i></button>
<button class="btn btn-aspect rounded-circle btn-alt-secondary mr-2"><i class="fa fa-times"></i></button>
<button class="btn btn-aspect btn-success btn-sm mr-2"><i class="fa fa-user fa-sm"></i></button>
<button class="btn btn-aspect btn-success mr-2"><i class="fa fa-user"></i></button>
<button class="btn btn-aspect btn-success 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.

Use *-0 to remove the .btn-aspect styling from given breakpoint and up.

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.

Block button

Responsive block button

<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>