Buttons

Default Buttons

The .btn classes are designed to be used with the <button> element, however, you can also use these classes on <a> or <input> elements, but some browsers may apply a slightly different rendering.

<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-highlight">Highlight</button>
<button type="button" class="btn btn-dark">Dark</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.

<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-highlight">Highlight</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Gradient Buttons

Description

<button type="button" class="btn btn-gradient-primary">Primary</button>
<button type="button" class="btn btn-gradient-secondary">Secondary</button>
<button type="button" class="btn btn-gradient-success">Success</button>
<button type="button" class="btn btn-gradient-danger">Danger</button>
<button type="button" class="btn btn-gradient-warning">Warning</button>
<button type="button" class="btn btn-gradient-info">Info</button>
<button type="button" class="btn btn-gradient-highlight">Highlight</button>
<button type="button" class="btn btn-gradient-dark">Dark</button>

Light Buttons

Use the .btn-*-light modifier class to make a light variation of the color buttons.

<button type="button" class="btn btn-primary-light">Primary</button>
<button type="button" class="btn btn-secondary-light">Secondary</button>
<button type="button" class="btn btn-success-light">Success</button>
<button type="button" class="btn btn-info-light">Info</button>
<button type="button" class="btn btn-warning-light">Warning</button>
<button type="button" class="btn btn-danger-light">Danger</button>

Button Sizes

Add .btn-lg, .btn-sm or .btn-xs for additional sizes.

<button type="button" class="btn btn-xs btn-danger">xSmall</button>
<button type="button" class="btn btn-sm btn-warning">Small</button>
<button type="button" class="btn btn-success">Normal</button>
<button type="button" class="btn btn-lg btn-primary">Large</button>

Button Shapes

Add .rectangle, .rounded, .rounded-*size or .pill for customized border-radius values. To display a button full-width in a block, add .d-block .w-100 class to the button.

<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary sharp">Rectangle</button>
<button type="button" class="btn btn-primary rounded">Rounded</button>
<button type="button" class="btn btn-primary pill">Pill Button</button>
<button type="button" class="btn btn-primary d-block w-100">Block Button</button>

Icon Buttons

Add .btn-icon class followed by btn-*size to change the regular buttons to icon-only buttons. On icon button you can use .btn-circle to make the buttons circle.

Icons Only
Icons and Text
Icons on right
<!-- icons only -->
<button type="button" class="btn btn-icon btn-primary">
    <span class="bi-brush"></span>
</button>

<button type="button" class="btn btn-icon btn-outline-secondary">
    <span class="bi-pencil"></span>
</button>

<button type="button" class="btn btn-icon btn-gradient-success btn-no-border">
    <span class="bi-unlock"></span>
</button>

<button type="button" class="btn btn-icon btn-info btn-circle">
    <span class="bi-flag"></span>
</button>

<button type="button" class="btn btn-icon btn-outline-warning btn-circle">
    <span class="bi-person-plus"></span>
</button>

<button type="button" class="btn btn-icon btn-gradient-danger btn-no-border btn-circle">
    <span class="bi-lock"></span>
</button>

<!-- icons and text -->
<button type="button" class="btn btn-success">
    <i class="bi-unlock mr-5"></i>
    <span>Unlock</span>
</button>

<button type="button" class="btn btn-danger-light">
    <i class="bi-heart mr-5"></i>
    <span>Like</span>
</button>

<button type="button" class="btn btn-gradient-info">
    <i class="bi-send mr-5"></i>
    <span>Send</span>
</button>

<!-- text and icons on right -->
<button type="button" class="btn btn-warning-light">
    <span>Starred</span>
    <i class="bi-star ml-5"></i>
</button>

<button type="button" class="btn btn-outline-primary">
    <span>Settings</span>
    <i class="bi-gear ml-5"></i>
</button>

<button type="button" class="btn btn-gradient-success">
    <span>Add to Cart</span>
    <i class="bi-cart3 ml-5"></i>
</button>

Button Groups

Wrap a series of buttons with .btn in .btn-group. Just like with the navs you can also add .active class to the buttons.

Button Group with middle button .active
Nesting with icon buttons

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Button toolbar with icon buttons

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary active" aria-current="page">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div><!-- / btn-group -->

<!-- nesting -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-icon btn-info">
        <span>1</span>
    </button>
    <button type="button" class="btn btn-icon btn-info">
        <span>2</span>
    </button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-info dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
        </button><!-- / dropdown-toggle -->
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul><!-- / dropdown-menu -->
    </div><!-- / btn-group -->
</div><!-- / btn-group -->

<!-- button toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group" aria-label="First group">
        <button type="button" class="btn btn-icon btn-highlight">
            <span class="bi-arrow-left"></span>
        </button>
        <button type="button" class="btn btn-icon btn-primary">
            <span>1</span>
        </button>
        <button type="button" class="btn btn-icon btn-highlight">
            <span>2</span>
        </button>
        <button type="button" class="btn btn-icon btn-highlight">
            <span>3</span>
        </button>
        <button type="button" class="btn btn-icon btn-highlight">
            <span class="bi-arrow-right"></span>
        </button>
    </div><!-- / btn-group -->

    <div class="btn-group" role="group" aria-label="Second group">
        <button type="button" class="btn btn-icon btn-highlight">
            <span>4</span>
        </button>
        <button type="button" class="btn btn-icon btn-highlight">
            <span>5</span>
        </button>
        <button type="button" class="btn btn-icon btn-highlight">
            <span>6</span>
        </button>
    </div><!-- / btn-group -->

    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-icon btn-primary-light">
            <span>7</span>
        </button>
    </div><!-- / btn-group -->
</div><!-- / btn-toolbar -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav