Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more.

HTML Code for this Element

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

Outline Buttons

For a lighter touch, Buttons also come in Outline variants with no background color.

HTML Code for this Element

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

Button Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

HTML Code for this Element

<button type="button" class="btn btn-primary btn-sm mb-1">Small button</button>
<button type="button" class="btn btn-primary mb-1">Normal button</button>
<button type="button" class="btn btn-primary btn-lg mb-1">Large button</button>
<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
	Custom button
</button>

Disabled State

Make buttons look inactive by adding the disabled boolean attribute

HTML Code for this Element

<button type="button" class="btn btn-primary mb-1" disabled>Primary button</button>
<button type="button" class="btn btn-info mb-1" disabled>Button</button>
<button type="button" class="btn btn-outline-primary mb-1" disabled>Primary button</button>
<button type="button" class="btn btn-outline-info mb-1" disabled>Button</button>

Rounded Buttons

To make the buttons rounded, add .rounded-pill class to the button.

HTML Code for this Element

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

Block Buttons

Block Buttons take full width of where they are placed.

HTML Code for this Element

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