@@include("../partials/head.html")
@@include("../partials/doc-navbar.html")
@@include("../partials/doc-sidenav.html")

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

Primary link Link

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

@@include("../partials/scripts.html")