Buttons

Variants #

Buttons can be created using the .btn class along with .btn-{variant}. The most useful variants are primary and secondary, which are often used as the branded and default variants respectively. Note that the default variant (.btn-secondary) changes its appearance depending on the color mode.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

Other button variants are also available and can be created by setting the {variant} to success, danger, warning, info, light, dark, or link. These variants are generally less useful, but they are still available to use by default.

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

A few things worth noting:

• The base .btn class sets up basic styles such as padding and content alignment, but lacks any explicit focus and hover styles. If you are using the .btn class on its own, remember to at least define some explicit :focus and/or :focus-visible styles.
• The text inside buttons will wrap by default. You can add the .text-nowrap class to the button to stop the text from wrapping.

Button tags #

The .btn classes 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.

<!-- Button tags -->
<a class="btn btn-link" href="#" role="button">Link</a>
<button class="btn btn-secondary" type="submit">Button</button>
<input class="btn btn-secondary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-danger" type="reset" value="Reset">

Outline buttons #

Create outline buttons using .btn-outline-{variant}. Here, the {variant} can be primary, secondary, success, danger, warning, info, light, or dark. Please note, the light and dark variants should only be used with contrasting background colors for optimal readability.

<!-- Outline buttons -->
<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 #

Create small and large buttons with the .btn-sm and .btn-lg classes respectively. The different sizes will work with all the variants from above, including outline buttons.

<!-- Small buttons -->
<button type="button" class="btn btn-primary btn-sm">Button</button>
<button type="button" class="btn btn-secondary btn-sm">Button</button>

<!-- Regular buttons -->
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>

<!-- Large buttons -->
<button type="button" class="btn btn-primary btn-lg">Button</button>
<button type="button" class="btn btn-secondary btn-lg">Button</button>

Disabled state #

Disable buttons by adding the disabled attribute. This will change the appearance of the button, remove pointer events, and prevent focusing.

For <a> elements styled as buttons, things work differently because the element does not support the disabled attribute. Therefore, you need to do the following:

• Add the .disabled class to make it visually appear disabled.
• Include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
• Make sure to omit the href attribute.

<!-- Disabled buttons -->
<button type="button" class="btn btn-primary" disabled>Button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>

<!-- Disabled links styled as buttons -->
<a class="btn btn-primary disabled" role="button" aria-disabled="true">Button</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Button</a>

Disabled state Link functionality caveat #

To cover cases where you have to keep the href attribute on a disabled link, the .disabled class uses pointer-events: none to try to disable the link functionality of the <a> element. Note that keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.

<!-- Disabled links with href styled as buttons -->
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Button</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Button</a>

Block buttons #

Create full-width, block buttons by adding the .w-100 and .d-block utility classes to the buttons.

<!-- Full-width, block buttons -->
<button type="button" class="btn btn-primary d-block w-100">Button</button>
<button type="button" class="btn btn-secondary d-block w-100 mt-2">Button</button>

Moreover, you can also use utilities on containers (containing buttons) to create stacks. This provides a lot of control in terms of positioning and placement, and also allows for responsive styling. For example, in the first container below, the buttons are stacked using .d-grid added to the container. The second container is set to use flexbox on medium screens and above using .d-md-flex.

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

<!-- Stacked buttons, flexbox on medium screens and above -->
<div class="d-grid gap-2 d-md-flex justify-content-md-between">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-secondary">Button</button>
</div>

Button plugin #

The button plugin allows you to create simple on/off toggle buttons. To create one, add data-bs-toggle="button" to toggle a button's active state. If you're pre-toggling a button, you must manually add the .active class and aria-pressed="true" to ensure that it is conveyed appropriately to assistive technologies. This plugin also works with <a> elements styled as buttons.

<!-- Buttons as on/off toggles -->
<button type="button" class="btn btn-outline-primary" data-bs-toggle="button">Python</button>
<button type="button" class="btn btn-outline-primary active" data-bs-toggle="button" aria-pressed="true">JavaScript</button>
<button type="button" class="btn btn-outline-primary" disabled data-bs-toggle="button">C++</button>

<a href="#" class="btn btn-outline-primary" role="button" data-bs-toggle="button">Back-end</a>
<a href="#" class="btn btn-outline-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Front-end</a>
<a class="btn btn-outline-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Full-stack</a>

You can read about the button plugin methods and more in the official Bootstrap documentation.

Buttons - Bootstrap
Continue reading on the offical documentation website