Developed by Codescandy

Buttons

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Buttons

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

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

<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

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

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

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

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

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

<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 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 type="button" class="btn btn-primary">
                                                            +
                                                            </button>
Also available in all button sizes. 
<button type="button" class="btn btn-primary">
                                                            +
                                                            </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. 

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

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