Buttons

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

Buttons

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

  <!-- Primary Button -->
  <button type="button" class="btn btn-primary mb-2">Primary</button>

  <!-- Secondary Button -->
  <button type="button" class="btn btn-secondary mb-2">Secondary</button>

  <!-- Success Button -->
  <button type="button" class="btn btn-success mb-2">Success</button>

  <!-- Danger Button -->
  <button type="button" class="btn btn-danger mb-2">Danger</button>

  <!-- Warning Button -->
  <button type="button" class="btn btn-warning mb-2">Warning</button>

  <!-- Info Button -->
  <button type="button" class="btn btn-info mb-2">Info</button>

  <!-- Light Button -->
  <button type="button" class="btn btn-light mb-2">Light</button>

  <!-- Dark Button -->
  <button type="button" class="btn btn-dark mb-2">Dark</button>

  <!-- Link Button -->
  <button type="button" class="btn btn-link mb-2">Link</button>

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.

 <!-- Primary Outline Button -->
        <button type="button" class="btn btn-outline-primary mb-2">Primary</button>

        <!-- Secondary Outline Button -->
        <button type="button" class="btn btn-outline-secondary mb-2">Secondary</button>

        <!-- Success Outline Button -->
        <button type="button" class="btn btn-outline-success mb-2">Success</button>

        <!-- Danger Outline Button -->
        <button type="button" class="btn btn-outline-danger mb-2">Danger</button>

        <!-- Warning Outline Button -->
        <button type="button" class="btn btn-outline-warning mb-2">Warning</button>

        <!-- Info Outline Button -->
        <button type="button" class="btn btn-outline-info mb-2">Info</button>

        <!-- Light Outline Button -->
        <button type="button" class="btn btn-outline-light mb-2">Light</button>

        <!-- Dark Outline Button -->
        <button type="button" class="btn btn-outline-dark mb-2">Dark</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).

Link 
<!-- Button Tag -->
<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">

Sizes

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

<!-- Sizing Button -->
<button type="button" class="btn btn-primary btn-lg">Large
    button</button>
<button type="button" class="btn btn-primary">Default
    button</button>
<button type="button" class="btn btn-primary btn-sm">Small
   button</button>
<button type="button" class="btn btn-primary btn-xs">Xtra Small
 button</button>

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.

 <!-- Button Block -->
 <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 md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.

  <!-- Button Block --> <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.

<!-- Button Block -->
<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.

 <!-- Button Block -->
 <div class="d-grid gap-2 d-md-flex justify-content-md-end">
   <button class="btn btn-primary" type="button">Button</button>
   <button class="btn btn-primary" type="button">Button</button>
 </div>

Button icons

A contained button with an icon.

  <!-- Button With Icon -->
<button type="button" class="btn btn-primary">
 Your Text Goes Here <i class="fe fe-shopping-bag ms-1"></i>
</button>
With fixed width and height. 
 <!-- Button with Icon-->
<!-- Button with Icon-->
    <button type="button" class="btn btn-primary btn-icon">
      +
    </button>
    <button type="button" class="btn btn-primary btn-icon">
      <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    </button>

    <button type="button" class="btn btn-icon btn-white border border-2 rounded-circle btn-dashed ms-2">
      +
 </button>
Also available in all button sizes. 
  <!-- Button with icon Size -->
<button type="button" class="btn btn-primary btn-lg">
    +
  </button>
  <button type="button" class="btn btn-primary">
    +
  </button>
  <button type="button" class="btn btn-primary btn-sm">
    +
</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically. 

<!-- Button Active State -->
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

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

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

 <!-- Toggle State -->
 <button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
 <button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
 <button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
Contents