Use the btn class to show the default button style.

<!-- Base 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-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-light">Light</button>

Use btn-outline- class with the below-mentioned variation to create a button with the outline.

<!-- Outline Buttons -->
<button type="button" class="btn btn-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-info">Info</button>

<button type="button" class="btn btn-outline-warning">Warning</button>

<button type="button" class="btn btn-outline-danger">Danger</button>

<button type="button" class="btn btn-outline-dark">Dark</button>

<button type="button" class="btn btn-outline-light">Light</button>

Use the rounded-pill class to make a rounded button.

<!-- Rounded Buttons -->
<button type="button" class="btn rounded-pill btn-primary">Primary</button>

<button type="button" class="btn rounded-pill btn-secondary">Secondary</button>

<button type="button" class="btn rounded-pill btn-success">Success</button>

<button type="button" class="btn rounded-pill btn-info">Info</button>

<button type="button" class="btn rounded-pill btn-warning">Warning</button>

<button type="button" class="btn rounded-pill btn-danger">Danger</button>

<button type="button" class="btn rounded-pill btn-dark">Dark</button>

<button type="button" class="btn rounded-pill btn-light">Light</button>

Use btn-soft- class with the below-mentioned variation to create a button with the soft background.

<!-- Soft Buttons -->
<button type="button" class="btn btn-soft-primary">Primary</button>

<button type="button" class="btn btn-soft-secondary">secondary</button>

<button type="button" class="btn btn-soft-success">Success</button>

<button type="button" class="btn btn-soft-info">Info</button>

<button type="button" class="btn btn-soft-warning">Warning</button>

<button type="button" class="btn btn-soft-danger">Danger</button>

<button type="button" class="btn btn-soft-dark">Dark</button>

Use btn-ghost- class with the below-mentioned variation to create a button with the transparent background.

<!-- ghost Buttons -->
<button type="button" class="btn btn-ghost-primary">Primary</button>

<button type="button" class="btn btn-ghost-secondary">secondary</button>

<button type="button" class="btn btn-ghost-success">Success</button>

<button type="button" class="btn btn-ghost-info">Info</button>

<button type="button" class="btn btn-ghost-warning">Warning</button>

<button type="button" class="btn btn-ghost-danger">Danger</button>

<button type="button" class="btn btn-ghost-dark">Dark</button>

Use bg-gradient class to create a gradient button.

<!-- Gradient Buttons -->
<button type="button" class="btn btn-primary bg-gradient">Primary</button>

<button type="button" class="btn btn-secondary bg-gradient">Secondary</button>

<button type="button" class="btn btn-success bg-gradient">Success</button>

<button type="button" class="btn btn-info bg-gradient">Info</button>

<button type="button" class="btn btn-warning bg-gradient">Warning</button>

<button type="button" class="btn btn-danger bg-gradient">Danger</button>

<button type="button" class="btn btn-dark bg-gradient">Dark</button>

<button type="button" class="btn btn-light bg-gradient">Light</button>

Use bg-animation class to create an animated button.

<!-- Animation Buttons -->
<button type="button" class="btn btn-primary btn-animation" data-text="Primary"><span>Primary</span></button>

<button type="button" class="btn btn-secondary btn-animation" data-text="Secondary"><span>Secondary</span></button>

<button type="button" class="btn btn-success btn-animation" data-text="Success"><span>Success</span></button>

<button type="button" class="btn btn-info btn-animation" data-text="Info"><span>Info</span></button>

<button type="button" class="btn btn-warning btn-animation" data-text="Warning"><span>Warning</span></button>

<button type="button" class="btn btn-danger btn-animation" data-text="Danger"><span>Danger</span></button>

<button type="button" class="btn btn-dark btn-animation" data-text="Dark"><span>Dark</span></button>

Use btn-label class to create a button with the label.

<!-- Buttons with Label -->
<button type="button" class="btn btn-primary btn-label"><i class="ri-user-smile-line label-icon align-middle fs-16 me-2"></i> Primary</button>

<button type="button" class="btn btn-success btn-label"><i class="ri-check-double-line label-icon align-middle fs-16 me-2"></i> Success</button>

<button type="button" class="btn btn-warning btn-label"><i class="ri-error-warning-line label-icon align-middle fs-16 me-2"></i> Warning</button>

<!-- Rounded with Label -->
<button type="button" class="btn btn-primary btn-label rounded-pill"><i class="ri-user-smile-line label-icon align-middle rounded-pill fs-16 me-2"></i> Primary</button>

<button type="button" class="btn btn-success btn-label rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-16 me-2"></i> Success</button>

<button type="button" class="btn btn-warning btn-label rounded-pill"><i class="ri-error-warning-line label-icon align-middle rounded-pill fs-16 me-2"></i> Warning</button>

<!-- Buttons with Label Right -->
<button type="button" class="btn btn-primary btn-label right"><i class="ri-user-smile-line label-icon align-middle fs-16 ms-2"></i> Primary</button>

<button type="button" class="btn btn-success btn-label right rounded-pill"><i class="ri-check-double-line label-icon align-middle rounded-pill fs-16 ms-2"></i> Success</button>

Example of loading buttons.

<!-- Load More Buttons -->
<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
<button class="btn btn-outline-primary btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
<button type="button" class="btn btn-success btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
<button type="button" class="btn btn-outline-secondary btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
<button type="button" class="btn btn-danger btn-load">
    <span class="d-flex align-items-center">
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
        <span class="flex-grow-1 ms-2">
            Loading...
        </span>
    </span>
</button>
</div>

<div class="d-flex flex-wrap gap-2 mb-3 mb-lg-0">
<button class="btn btn-outline-primary btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
<button type="button" class="btn btn-success btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-border flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
<button type="button" class="btn btn-outline-warning btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
<button type="button" class="btn btn-info btn-load">
    <span class="d-flex align-items-center">
        <span class="flex-grow-1 me-2">
            Loading...
        </span>
        <span class="spinner-grow flex-shrink-0" role="status">
            <span class="visually-hidden">Loading...</span>
        </span>
    </span>
</button>
</div>

Example of simple bottom borderd buttons.

<!-- Border Buttons -->
<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
<button class="btn btn-primary btn-border">Primary</button>
<button class="btn btn-secondary btn-border">Secondary</button>
<button class="btn btn-success btn-border">Success</button>
<button class="btn btn-warning btn-border">Warning</button>
<button class="btn btn-danger btn-border">Danger</button>
</div>

<div class="hstack flex-wrap gap-2 mb-3 mb-lg-0">
    <button class="btn btn-outline-primary btn-border">Primary</button>
    <button class="btn btn-outline-secondary btn-border">Secondary</button>
    <button class="btn btn-outline-success btn-border">Success</button>
    <button class="btn btn-soft-warning btn-border">Warning</button>
    <button class="btn btn-soft-danger btn-border">Danger</button>
    <button class="btn btn-soft-dark btn-border">Dark</button>
</div>

Example of simple darken buttons.

<!-- Darken Buttons -->
<button class="btn btn-darken-primary">Primary</button>

<button class="btn btn-darken-secondary">Secondary</button>

<button class="btn btn-darken-success">Success</button>

<button class="btn btn-darken-warning">Warning</button>

<button class="btn btn-darken-danger">Danger</button>

<button class="btn btn-darken-info">Info</button>

<button class="btn btn-darken-dark">Dark</button>

<button class="btn btn-darken-light">Light</button>

Example of toggle buttons.

<!-- Custom Toggle Buttons -->
<button type="button" class="btn btn-primary custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-alarm-line align-bottom"></i> Active</span>
    <span class="icon-off">Unactive</span>
</button>

<button type="button" class="btn btn-secondary custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-user-add-line align-bottom me-1"></i> Connect</span>
    <span class="icon-off"><i class="ri-check-fill align-bottom me-1"></i> Unconnect</span>
</button>

<button type="button" class="btn btn-success custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-thumb-up-line align-bottom me-1"></i> Yes</span>
    <span class="icon-off"><i class="ri-thumb-down-line align-bottom me-1"></i> No</span>
</button>

<button type="button" class="btn btn-warning custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
</button>

<button type="button" class="btn btn-danger custom-toggle" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button>

<button type="button" class="btn btn-dark custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-bookmark-line align-bottom me-1"></i> Bookmark</span>
    <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom me-1"></i> Unbookmark</span>
</button>

<button type="button" class="btn btn-outline-primary custom-toggle" data-bs-toggle="button">
    <span class="icon-on">Active</span>
    <span class="icon-off">Unactive</span>
</button>

<button type="button" class="btn btn-outline-secondary custom-toggle" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-add-line align-bottom me-1"></i> Follow</span>
    <span class="icon-off"><i class="ri-user-unfollow-line align-bottom me-1"></i> Unfollow</span>
</button>

<button type="button" class="btn btn-outline-success custom-toggle active" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button>

<button type="button" class="btn btn-soft-warning custom-toggle active" data-bs-toggle="button">
    <span class="icon-on">Follow</span>
    <span class="icon-off">Unfollow</span>
</button>

<button type="button" class="btn btn-soft-danger custom-toggle" data-bs-toggle="button">
    <span class="icon-on">On</span>
    <span class="icon-off">Off</span>
</button>

<button type="button" class="btn btn-dark custom-toggle active" data-bs-toggle="button">
    <span class="icon-on"><i class="ri-bookmark-line align-bottom"></i></span>
    <span class="icon-off"><i class="ri-bookmark-3-fill align-bottom"></i></span>
</button>

Use btn-lg class to create a large size button and btn-sm class to create a small size button.

<!-- Large Button -->
<button type="button" class="btn btn-primary btn-lg">Large button</button>

<button type="button" class="btn btn-light btn-lg">Large button</button>

<!-- Small Button -->
<button type="button" class="btn btn-primary btn-sm">Small button</button>

<button type="button" class="btn btn-light btn-sm">Small button</button>

Use w-xs,w-sm,w-md,w-lg class to make different sized buttons respectively.

<!-- Width Button -->
<button type="button" class="btn btn-primary w-xs">Xs</button>

<button type="button" class="btn btn-danger w-sm">Small</button>

<button type="button" class="btn btn-warning w-md">Medium</button>

<button type="button" class="btn btn-success w-lg">Large</button>

Use btn class with different HTML elements. (though some browsers may apply a slightly different rendering)

<!-- Tag Button -->
<a class="btn btn-primary" href="#" role="button">Link</a>

<button class="btn btn-success" type="submit">Button</button>

<input class="btn btn-info" type="button" value="Input">

<input class="btn btn-danger" type="submit" value="Submit">

<input class="btn btn-warning" type="reset" value="Reset">

Use data-bs-toggle="button" to toggle a button’s active state.

<!-- Toggle Button Status -->
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">
    Single toggle
</button>

Use d-grid class to create a full-width block button.

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

Combine button-like checkbox and radio toggle buttons into a seamless looking button group.

<!-- Checkbox Buttons -->
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
    <input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off" checked="">
    <label class="btn btn-primary" for="btncheck1">Checkbox 1</label>

    <input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
    <label class="btn btn-primary" for="btncheck2">Checkbox 2</label>

    <input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
    <label class="btn btn-primary" for="btncheck3">Checkbox 3</label>
</div>

<!-- Radio Buttons -->
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
    <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked="">
    <label class="btn btn-outline-secondary" for="btnradio1">Radio 1</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradio2">Radio 2</label>

    <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
    <label class="btn btn-outline-secondary" for="btnradio3">Radio 3</label>
</div>

Use the btn-group class in the parent class to wrap a series of buttons.

<!-- Buttons Group -->
<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">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group mt-4 mt-md-0" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light"><i class="ri-align-right"></i></button>
    <button type="button" class="btn btn-light"><i class="ri-align-center"></i></button>
    <button type="button" class="btn btn-light"><i class="ri-align-left"></i></button>
</div>

Use btn-icon class to wrap icon in button

<!-- Buttons Group -->
<button type="button" class="btn btn-primary"><i class="ri-map-pin-line"></i></button>
<button type="button" class="btn btn-danger btn-icon"><i class="ri-delete-bin-5-line"></i></button>
<button type="button" class="btn btn-success btn-icon"><i class="ri-check-double-line"></i></button>
<button type="button" class="btn btn-light btn-icon"><i class="ri-brush-2-fill"></i></button>

<button type="button" class="btn btn-outline-primary btn-icon"><i class="ri-24-hours-fill"></i></button>
<button type="button" class="btn btn-outline-danger btn-icon"><i class="ri-customer-service-2-line"></i></button>
<button type="button" class="btn btn-outline-success btn-icon"><i class="ri-mail-send-line"></i></button>
<button type="button" class="btn btn-outline-warning btn-icon"><i class="ri-menu-2-line"></i></button>

Use btn-toolbar class to combine sets of button groups into more complex components.

<!-- Buttons Toolbar -->
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group me-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-light">1</button>
        <button type="button" class="btn btn-light">2</button>
        <button type="button" class="btn btn-light">3</button>
        <button type="button" class="btn btn-light">4</button>
    </div>
    <div class="btn-group me-2" role="group" aria-label="Second group">
        <button type="button" class="btn btn-light">5</button>
        <button type="button" class="btn btn-light">6</button>
        <button type="button" class="btn btn-light">7</button>
    </div>
    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-light">8</button>
    </div>
</div>

Use btn-group- class with the below-mentioned variation to set the different sizes of button groups.

<!-- Group Buttons Sizing -->
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div> 

<div class="btn-group mt-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-light">Left</button>
    <button type="button" class="btn btn-light">Middle</button>
    <button type="button" class="btn btn-light">Right</button>
</div>

<div class="btn-group btn-group-sm mt-2" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-secondary">Left</button>
    <button type="button" class="btn btn-secondary">Middle</button>
    <button type="button" class="btn btn-secondary">Right</button>
</div>

Make a set of buttons appear vertically stacked .Split button dropdowns are not supported here.

<!-- Vertical Variation -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>
    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
        </button>
        <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>
    </div>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-light">Button</button>
    <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
            <a class="dropdown-item" href="#">Dropdown link</a>
            <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
    </div>
    <button type="button" class="btn btn-light">Button</button>
    <button type="button" class="btn btn-light">Button</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical radio toggle button group">
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio1" checked="">
    <label class="btn btn-outline-secondary" for="vbtn-radio1">Radio 1</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio2">
    <label class="btn btn-outline-secondary" for="vbtn-radio2">Radio 2</label>
    <input type="radio" class="btn-check" name="vbtn" id="vbtn-radio3">
    <label class="btn btn-outline-secondary" for="vbtn-radio3">Radio 3</label>
</div>