Use Bootstrap’s custom button styles for actions in forms,dialogs,and more with support for multiple sizes,states,and more.
Examples
Bootstrap includes several predefined button styles,each serving its own semantic purpose,with a few extras thrown in for more control.
<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button>Disable text wrapping
If you don’t want the button text to wrap,you can add the .text-nowrapclass to the button. In Sass,you can set $btn-white-space:nowrapto disable text wrapping for each button.
Button tags
The .btnclasses are designed to be used with the <button>element. However,you can also use these classes on <a>or <input>elements(though some browsers may apply a slightly different rendering).
When using button classes on <a>elements that are used to trigger in-page functionality(like collapsing content),rather than linking to new pages or sections within the current page,these links should be given a role="button"to appropriately convey their purpose to assistive technologies such as screen readers.
<a class="btn btn-primary" href="#" role="button">Link</a><button class="btn btn-primary" type="submit">Button</button><input class="btn btn-primary" type="button" value="Input"><input class="btn btn-primary" type="submit" value="Submit"><input class="btn btn-primary" type="reset" value="Reset">Outline buttons
In need of a button,but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-*ones to remove all background images and colors on any button.
<button type="button" class="btn btn-outline-primary">Primary</button><button type="button" class="btn btn-outline-secondary">Secondary</button><button type="button" class="btn btn-outline-success">Success</button><button type="button" class="btn btn-outline-danger">Danger</button><button type="button" class="btn btn-outline-warning">Warning</button><button type="button" class="btn btn-outline-info">Info</button><button type="button" class="btn btn-outline-light">Light</button><button type="button" class="btn btn-outline-dark">Dark</button>Sizes
Fancy larger or smaller buttons? Add .btn-lgor .btn-smfor additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button><button type="button" class="btn btn-secondary btn-lg">Large button</button><button type="button" class="btn btn-primary btn-sm">Small button</button><button type="button" class="btn btn-secondary btn-sm">Small button</button>Disabled state
Make buttons look inactive by adding the disabledboolean attribute to any <button>element. Disabled buttons have pointer-events:noneapplied to,preventing hover and active states from triggering.
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button><button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
Disabled buttons using the <a>element behave a bit different:
-
<a>s don’t support thedisabledattribute,so you must add the.disabledclass to make it visually appear disabled. - Some future-friendly styles are included to disable all
pointer-eventson anchor buttons. - Disabled buttons should include the
aria-disabled="true"attribute to indicate the state of the element to assistive technologies.
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a><a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>Block buttons
Create responsive stacks of full-width,“block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes,we have much greater control over spacing,alignment,and responsive behaviors.
<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>
Here we create a responsive variation,starting with vertically stacked buttons until the mdbreakpoint,where .d-md-blockreplaces the .d-gridclass,thus nullifying the gap-2utility. Resize your browser to see them change.
<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>
You can adjust the width of your block buttons with grid column width classes. For example,for a half-width “block button”,use .col-6. Center it horizontally with .mx-auto,too.
<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>Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.
<div class="d-grid gap-2 d-md-flex justify-content-md-end"><button class="btn btn-primary me-md-2" type="button">Button</button><button class="btn btn-primary" type="button">Button</button></div>