Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Base class

Bootstrap has a base .btn class that sets up basic styles such as padding and content alignment. By default, .btn controls have a transparent border and background color, and lack any explicit focus and hover styles.

HTML

        <button type="button" class="btn">Base class</button>

The .btn class is intended to be used in conjunction with our button variants, or to serve as a basis for your own custom styles.

If you are using the .btn class on its own, remember to at least define some explicit :focus and/or :focus-visible styles.

Variants

Bootstrap includes several button variants, each serving its own semantic purpose, with a few extras thrown in for more control.

HTML

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

Accessibility tip: Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies like screen readers. Please ensure the meaning is obvious from the content itself (e.g., the visible text with a sufficient color contrast ) or is included through alternative means, such as additional text hidden with the .visually-hidden class.

Disable text wrapping

If you don’t want the button text to wrap, you can add the .text-nowrap class to the button. In Sass, you can set $btn-white-space: nowrap to disable text wrapping for each button.

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.

Link

HTML

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

HTML

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

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Sizes

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

HTML

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

HTML

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

You can even roll your own custom sizing with CSS variables:

HTML

         <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 to any button element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

HTML

        <button type="button" class="btn btn-primary" disabled>Primary button</button>
        <button type="button" class="btn btn-secondary" disabled>Button</button>
        <button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
        <button type="button" class="btn btn-outline-secondary" disabled>Button</button>

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 a s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support pointer-events: none, 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 ria-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.

Primary link Link

HTML

        <a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
        <a href="#" class="btn btn-secondary 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.

HTML

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

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.

HTML

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

Toggle states

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.

HTML

        <p class="d-inline-flex gap-1">
          <button type="button" class="btn" data-bs-toggle="button">Toggle button</button>
          <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
          <button type="button" class="btn" disabled data-bs-toggle="button">Disabled toggle button</button>
        </p>
        <p class="d-inline-flex gap-1">
          <button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
          <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
          <button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>
        </p>