@@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/buy-template.html") @@include("../partials/scripts.html")