Default Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary btn-wave">Secondary</button>
        <button type="button" class="btn btn-success btn-wave">Success</button>
        <button type="button" class="btn btn-danger btn-wave">Danger</button>
        <button type="button" class="btn btn-warning btn-wave">Warning</button>
        <button type="button" class="btn btn-info btn-wave">Info</button>
        <button type="button" class="btn btn-light btn-wave">Light</button>
        <button type="button" class="btn btn-dark btn-wave text-white">Dark</button>
        <button type="button" class="btn btn-link btn-wave">Link</button>
    </div>
Button tags
Link 
<div class="btn-list">
        <a class="btn btn-primary btn-wave" href="javascript:void(0);" role="button">Link</a>
        <button class="btn btn-secondary btn-wave" type="submit">Button</button>
        <input class="btn btn-info" type="button" value="Input">
        <input class="btn btn-warning" type="submit" value="Submit">
        <input class="btn btn-success" type="reset" value="Reset">
    </div>
Rounded Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-success rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-danger rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-warning rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-info rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-light rounded-pill btn-wave">Light</button>
        <button type="button" class="btn btn-dark rounded-pill btn-wave text-white">Dark</button>
        <button type="button" class="btn btn-link rounded-pill btn-wave">Link</button>
    </div>
Light Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary-light btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-light btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-light btn-wave">Success</button>
        <button type="button" class="btn btn-danger-light btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-light btn-wave">Warning</button>
        <button type="button" class="btn btn-info-light btn-wave">Info</button>
        <button type="button" class="btn btn-purple-light btn-wave">purple</button>
        <button type="button" class="btn btn-teal-light btn-wave">teal</button>
        <button type="button" class="btn btn-orange-light btn-wave">orange</button>
    </div>
Light Rounded Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary-light rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-light rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-light rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-danger-light rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-light rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-info-light rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-purple-light rounded-pill btn-wave">purple</button>
        <button type="button" class="btn btn-teal-light rounded-pill btn-wave">teal</button>
        <button type="button" class="btn btn-orange-light rounded-pill btn-wave">orange</button>
    </div>
Outline Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-outline-primary btn-wave">Primary</button>
        <button type="button" class="btn btn-outline-secondary btn-wave">Secondary</button>
        <button type="button" class="btn btn-outline-success btn-wave">Success</button>
        <button type="button" class="btn btn-outline-danger btn-wave">Danger</button>
        <button type="button" class="btn btn-outline-warning btn-wave">Warning</button>
        <button type="button" class="btn btn-outline-info btn-wave">Info</button>
        <button type="button" class="btn btn-outline-light btn-wave">Light</button>
        <button type="button" class="btn btn-outline-dark btn-wave">Dark</button>
    </div>
Rounded Outline Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-outline-primary rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-outline-secondary rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-outline-success rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-outline-danger rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-outline-warning rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-outline-info rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-outline-light rounded-pill btn-wave">Light</button>
        <button type="button" class="btn btn-outline-dark rounded-pill btn-wave">Dark</button>
    </div>
Gradient Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary-gradient btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-gradient btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-gradient btn-wave">Success</button>
        <button type="button" class="btn btn-danger-gradient btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-gradient btn-wave">Warning</button>
        <button type="button" class="btn btn-info-gradient btn-wave">Info</button>
        <button type="button" class="btn btn-orange-gradient btn-wave">Orange</button>
        <button type="button" class="btn btn-purple-gradient btn-wave">Purple</button>
        <button type="button" class="btn btn-teal-gradient btn-wave">Teal</button>
    </div>
Rounded Gradient Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary-gradient rounded-pill btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-gradient rounded-pill btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-gradient rounded-pill btn-wave">Success</button>
        <button type="button" class="btn btn-danger-gradient rounded-pill btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-gradient rounded-pill btn-wave">Warning</button>
        <button type="button" class="btn btn-info-gradient rounded-pill btn-wave">Info</button>
        <button type="button" class="btn btn-orange-gradient rounded-pill btn-wave">Orange</button>
        <button type="button" class="btn btn-purple-gradient rounded-pill btn-wave">Purple</button>
        <button type="button" class="btn btn-teal-gradient rounded-pill btn-wave">Teal</button>
    </div>
Ghost Buttons 
<div class="btn-list">
        <button type="button" class="btn btn-primary-ghost btn-wave">Primary</button>
        <button type="button" class="btn btn-secondary-ghost btn-wave">Secondary</button>
        <button type="button" class="btn btn-success-ghost btn-wave">Success</button>
        <button type="button" class="btn btn-danger-ghost btn-wave">Danger</button>
        <button type="button" class="btn btn-warning-ghost btn-wave">Warning</button>
        <button type="button" class="btn btn-info-ghost btn-wave">Info</button>
        <button type="button" class="btn btn-orange-ghost btn-wave">Orange</button>
        <button type="button" class="btn btn-purple-ghost btn-wave">Purple</button>
        <button type="button" class="btn btn-teal-ghost btn-wave">Teal</button>
    </div>
Raised Buttons 
<div class="btn-list">
        <button class="btn btn-primary btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-secondary btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-success btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-info btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-warning btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-danger btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-purple btn-raised-shadow btn-wave">Button</button>
        <button class="btn btn-orange btn-raised-shadow btn-wave">Button</button>
    </div>
Label Buttons 
<div class="btn-list">
        <button class="btn btn-primary label-btn">
            <i class="ri-chat-smile-line label-btn-icon me-2"></i>
            Primary
        </button>
        <button class="btn btn-secondary label-btn">
            <i class="ri-settings-4-line label-btn-icon me-2"></i>
            Secondary
        </button>
        <button class="btn btn-warning label-btn rounded-pill">
            <i class="ri-spam-2-line label-btn-icon me-2 rounded-pill"></i>
            Warning
        </button>
        <button class="btn btn-info label-btn rounded-pill">
            <i class="ri-phone-line label-btn-icon me-2 rounded-pill"></i>
            Info
        </button>
        <button class="btn btn-success label-btn label-end">
            Success
            <i class="ri-thumb-up-line label-btn-icon ms-2"></i>
        </button>
        <button class="btn btn-danger label-btn label-end rounded-pill">
            Cancel
            <i class="ri-close-line label-btn-icon ms-2 rounded-pill"></i>
        </button>
    </div>
button plugin toggle states 
<div class="btn-list">
        <div class="mb-4">
            <button type="button" class="btn btn-primary btn-wave" data-bs-toggle="button"
                >Toggle button</button>
            <button type="button" class="btn btn-secondary active btn-wave" data-bs-toggle="button"
                aria-pressed="true">Active toggle button</button>
            <button type="button" class="btn btn-teal btn-wave" disabled data-bs-toggle="button"
                >Disabled toggle
                button</button>
        </div>
        <div>
            <a href="javascript:void(0);" class="btn btn-primary btn-wave" role="button" data-bs-toggle="button">Toggle
                link</a>
            <a href="javascript:void(0);" class="btn btn-secondary active btn-wave" role="button" data-bs-toggle="button"
                aria-pressed="true">Active toggle link</a>
            <a class="btn btn-teal disabled btn-wave" aria-disabled="true" role="button"
                data-bs-toggle="button">Disabled toggle link</a>
        </div>
    </div>
disabled state with anchor tags 
<div class="btn-list">
        <div class="mb-4">
            <button type="button" class="btn btn-primary" disabled="">Primary
                button</button>
            <button type="button" class="btn btn-secondary" disabled="">Button</button>
            <button type="button" class="btn btn-outline-primary" disabled="">Primary
                button</button>
            <button type="button" class="btn btn-outline-secondary" disabled="">Button</button>
        </div>

        <div>
            <a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary
                link</a>
            <a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>
        </div>
    </div>
Loading Buttons 
<div class="btn-list d-md-flex flex-wrap">
        <button class="btn btn-primary btn-loader">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
        </button>
        <button class="btn btn-outline-secondary btn-loader">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-2-fill fs-16"></i></span>
        </button>
        <button class="btn btn-info-transparent btn-loader">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-4-line fs-16"></i></span>
        </button>
        <button class="btn btn-warning-transparent btn-loader">
            <span class="me-2">Loading</span>
            <span class="loading"><i class="ri-loader-5-line fs-16"></i></span>
        </button>
        <button class="btn btn-success btn-loader disabled">
            <span class="me-2">Disabled</span>
            <span class="loading"><i class="ri-refresh-line fs-16"></i></span>
        </button>
    </div>
Link functionally caveat
Primary link Link 
<div class="btn-list">
        <a class="btn btn-primary disabled" tabindex="-1" role="button"
            aria-disabled="true">Primary link</a>
        <a class="btn btn-secondary disabled" tabindex="-1" role="button"
            aria-disabled="true">Link</a>
    </div>
Icon Buttons
<div class="btn-list d-md-flex d-block">
        <div class="mb-md-0 mb-2">
            <button class="btn btn-icon btn-primary btn-wave">
                <i class="ri-bank-fill"></i>
            </button>
            <button class="btn btn-icon btn-info btn-wave">
                <i class="ri-medal-line"></i>
            </button>
            <button class="btn btn-icon btn-danger btn-wave">
                <i class="ri-archive-line"></i>
            </button>
            <button class="btn btn-icon btn-warning btn-wave me-5">
                <i class="ri-calendar-2-line"></i>
            </button>
        </div>
        <div class="mb-md-0 mb-2">
            <button class="btn btn-icon btn-primary-transparent rounded-pill btn-wave">
                <i class="ri-home-smile-line"></i>
            </button>
            <button class="btn btn-icon btn-secondary-transparent rounded-pill btn-wave">
                <i class="ri-delete-bin-line"></i>
            </button>
            <button class="btn btn-icon btn-success-transparent rounded-pill btn-wave">
                <i class="ri-notification-3-line"></i>
            </button>
            <button class="btn btn-icon btn-danger-transparent rounded-pill btn-wave me-5">
                <i class="ri-chat-settings-line"></i>
            </button>
        </div>
        <div class="">
            <button class="btn btn-icon btn-outline-primary rounded-pill btn-wave">
                <i class="ri-phone-line"></i>
            </button>
            <button class="btn btn-icon btn-outline-teal rounded-pill btn-wave">
                <i class="ri-customer-service-2-line"></i>
            </button>
            <button class="btn btn-icon btn-outline-success rounded-pill btn-wave">
                <i class="ri-live-line"></i>
            </button>
            <button class="btn btn-icon btn-outline-secondary rounded-pill btn-wave">
                <i class="ri-save-line"></i>
            </button>
        </div>
    </div>
Social Buttons 
<div class="btn-list">
        <button class="btn btn-icon btn-facebook btn-wave">
            <i class="ri-facebook-line"></i>
        </button>
        <button class="btn btn-icon btn-twitter btn-wave">
            <i class="ri-twitter-x-line"></i>
        </button>
        <button class="btn btn-icon btn-instagram btn-wave">
            <i class="ri-instagram-line"></i>
        </button>
        <button class="btn btn-icon btn-github btn-wave">
            <i class="ri-github-line"></i>
        </button>
        <button class="btn btn-icon btn-youtube btn-wave">
            <i class="ri-youtube-line"></i>
        </button>
        <button class="btn btn-icon btn-google btn-wave">
            <i class="ri-google-line"></i>
        </button>
    </div>
Sizes 
<div class="btn-list">
        <button type="button" class="btn btn-primary btn-sm btn-wave">Small
            button</button>
        <button type="button" class="btn btn-secondary btn-wave">Default
            button</button>
        <button type="button" class="btn btn-success btn-lg btn-wave">Large
            button</button>
    </div>
Buttons With Different Shadows 
<div class="btn-list d-flex">
        <div class="me-5">
            <button class="btn btn-primary shadow-sm btn-wave">Button</button>
            <button class="btn btn-primary shadow btn-wave">Button</button>
            <button class="btn btn-primary shadow-lg btn-wave">Button</button>
        </div>
        <div>
            <button class="btn btn-secondary btn-sm shadow-sm btn-wave">Button</button>
            <button class="btn btn-info shadow btn-wave">Button</button>
            <button class="btn btn-lg btn-success shadow-lg btn-wave">Button</button>
        </div>
    </div>
Button Widths 
<div class="btn-list">
        <button type="button" class="btn btn-primary btn-w-xs btn-wave">XS</button>
        <button type="button" class="btn btn-secondary btn-w-sm btn-wave">SM</button>
        <button type="button" class="btn btn-warning btn-w-md btn-wave">MD</button>
        <button type="button" class="btn btn-info btn-w-lg btn-wave">LG</button>
    </div>
Different Colored Buttons With Shadows 
<div class="btn-list">
        <button class="btn btn-primary shadow-primary btn-wave">Button</button>
        <button class="btn btn-secondary shadow-secondary btn-wave">Button</button>
        <button class="btn btn-success shadow-success btn-wave">Button</button>
        <button class="btn btn-info shadow-info btn-wave">Button</button>
        <button class="btn btn-warning shadow-warning btn-wave">Button</button>
        <button class="btn btn-danger shadow-danger btn-wave">Button</button>
        <button class="btn btn-purple shadow-purple btn-wave">Button</button>
        <button class="btn btn-orange shadow-orange btn-wave">Button</button>
    </div>
Custom Buttons 
<div class="btn-list">
        <button class="btn btn-info custom-button rounded-pill">
            <span class="custom-btn-icons"><i class="ri-twitter-x-line text-info"></i></span>
            Twitter
        </button>
        <button class="btn btn-teal-light btn-border-down">Border</button>
        <button class="btn btn-secondary-light btn-border-start">Border</button>
        <button class="btn btn-purple-light btn-border-end">Border</button>
        <button class="btn btn-warning-light btn-border-top">Border</button>
        <button class="btn btn-secondary btn-glare"><span>Glare Button</span></button>
        <button class="btn btn-danger btn-hover btn-hover-animate">Like</button>
        <button class="btn btn-success btn-darken-hover">Hover</button>
        <button class="btn btn-orange btn-custom-border">Hover</button>
    </div>
Block buttons 
<div class="btn-list">
        <div class="d-grid gap-2 mb-4">
            <button class="btn btn-primary btn-wave" type="button">Button</button>
            <button class="btn btn-secondary btn-wave" type="button">Button</button>
        </div>
        <div class="d-grid gap-2 d-md-block">
            <button class="btn btn-info btn-wave" type="button">Button</button>
            <button class="btn btn-success btn-wave" type="button">Button</button>
        </div>
        <div class="d-grid gap-2 col-6 mx-auto">
            <button class="btn btn-danger btn-wave" type="button">Button</button>
            <button class="btn btn-warning btn-wave" type="button">Button</button>
        </div>
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button class="btn btn-teal me-md-2 btn-wave" type="button">Button</button>
            <button class="btn btn-purple btn-wave" type="button">Button</button>
        </div>
    </div>
Basic example 
<div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-info btn-wave"><i class="bi bi-skip-backward"></i></button>
        <button type="button" class="btn btn-info btn-wave"><i class="bi bi-pause"></i></button>
        <button type="button" class="btn btn-info btn-wave"><i class="bi bi-skip-forward"></i></button>
    </div>
Navigation
Active link Link Link 
<div class="btn-group">
        <a href="javascript:void(0);" class="btn btn-primary active btn-wave" aria-current="page">Active
            link</a>
        <a href="javascript:void(0);" class="btn btn-primary">Link</a>
        <a href="javascript:void(0);" class="btn btn-primary">Link</a>
    </div>
Mixed style 
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
        <button type="button" class="btn btn-danger btn-wave">Left</button>
        <button type="button" class="btn btn-warning btn-wave">Middle</button>
        <button type="button" class="btn btn-success btn-wave">Right</button>
    </div>
Outline styled 
<div class="btn-group" role="group" aria-label="Basic outlined example">
        <button type="button" class="btn btn-outline-primary btn-wave">Left</button>
        <button type="button" class="btn btn-outline-primary btn-wave">Middle</button>
        <button type="button" class="btn btn-outline-primary btn-wave">Right</button>
    </div>
Checkbox button groups 
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
        <input type="checkbox" class="btn-check" id="btncheck1">
        <label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>

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

        <input type="checkbox" class="btn-check" id="btncheck3">
        <label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
    </div>
Radio button groups 
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
            checked>
        <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

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

        <input type="radio" class="btn-check" name="btnradio" id="btnradio3"
        >
        <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
    </div>
Sizing 
<div class="btn-group btn-group-lg my-1" role="group" aria-label="Large button group">
        <button type="button" class="btn btn-outline-success">Left</button>
        <button type="button" class="btn btn-outline-success">Middle</button>
        <button type="button" class="btn btn-outline-success">Right</button>
    </div>
    <div class="btn-group my-1" role="group" aria-label="Default button group">
        <button type="button" class="btn btn-outline-success">Left</button>
        <button type="button" class="btn btn-outline-success">Middle</button>
        <button type="button" class="btn btn-outline-success">Right</button>
    </div>
    <div class="btn-group btn-group-sm my-1" role="group" aria-label="Small button group">
        <button type="button" class="btn btn-outline-success">Left</button>
        <button type="button" class="btn btn-outline-success">Middle</button>
        <button type="button" class="btn btn-outline-success">Right</button>
    </div>
Button toolbar 
<div class="btn-toolbar mb-4" role="toolbar"
        aria-label="Toolbar with button groups">
        <div class="btn-group me-2 my-1" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
        <div class="btn-group me-2 my-1" role="group" aria-label="Second group">
            <button type="button" class="btn btn-secondary">5</button>
            <button type="button" class="btn btn-secondary">6</button>
            <button type="button" class="btn btn-secondary">7</button>
        </div>
        <div class="btn-group my-1" role="group" aria-label="Third group">
            <button type="button" class="btn btn-info">8</button>
        </div>
    </div>
    <div class="btn-toolbar mb-3" role="toolbar"
        aria-label="Toolbar with button groups">
        <div class="btn-group me-2 my-1" role="group" aria-label="First group">
            <button type="button" class="btn btn-outline-secondary">1</button>
            <button type="button" class="btn btn-outline-secondary">2</button>
            <button type="button" class="btn btn-outline-secondary">3</button>
            <button type="button" class="btn btn-outline-secondary">4</button>
        </div>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon">@</div>
            <input type="text" class="form-control"
                placeholder="Input group example"
                aria-label="Input group example"
                aria-describedby="btnGroupAddon">
        </div>
    </div>
    <div class="btn-toolbar justify-content-between" role="toolbar"
        aria-label="Toolbar with button groups">
        <div class="btn-group my-1" role="group" aria-label="First group">
            <button type="button" class="btn btn-outline-secondary">1</button>
            <button type="button" class="btn btn-outline-secondary">2</button>
            <button type="button" class="btn btn-outline-secondary">3</button>
            <button type="button" class="btn btn-outline-secondary">4</button>
        </div>
        <div class="input-group">
            <div class="input-group-text" id="btnGroupAddon2">@</div>
            <input type="text" class="form-control"
                placeholder="Input group example"
                aria-label="Input group example"
                aria-describedby="btnGroupAddon2">
        </div>
    </div>
Nesting 
<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="javascript:void(0);">Dropdown link</a></li>
                <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
            </ul>
        </div>
    </div>
Vertical variation 
<div class="row gap-2">
        <div class="col-sm-3">
            <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                <button type="button" class="btn btn-primary">Button</button>
                <button type="button" class="btn btn-primary">Button</button>
                <div class="btn-group" role="group">
                    <button id="btnGroupVerticalDrop1" type="button"
                        class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropdown
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                    </ul>
                </div>
                <button type="button" class="btn btn-primary">Button</button>
                <button type="button" class="btn btn-primary">Button</button>
                <div class="btn-group" role="group">
                    <button id="btnGroupVerticalDrop2" type="button"
                        class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropdown
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                    </ul>
                </div>
                <div class="btn-group" role="group">
                    <button id="btnGroupVerticalDrop3" type="button"
                        class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropdown
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                    </ul>
                </div>
                <div class="btn-group" role="group">
                    <button id="btnGroupVerticalDrop4" type="button"
                        class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown"
                        aria-expanded="false">
                        Dropdown
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);">Dropdown link</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                <button type="button" class="btn btn-info">Button</button>
                <button type="button" class="btn btn-info">Button</button>
                <button type="button" class="btn btn-info">Button</button>
                <button type="button" class="btn btn-info">Button</button>
                <button type="button" class="btn btn-info">Button</button>
                <button type="button" class="btn btn-info">Button</button>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="btn-group-vertical" role="group"
                aria-label="Vertical radio toggle button group">
                <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1"
                    checked="">
                <label class="btn btn-outline-danger" for="vbtn-radio1">Radio 1</label>
                <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2"
                >
                <label class="btn btn-outline-danger" for="vbtn-radio2">Radio 2</label>
                <input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio3"
                >
                <label class="btn btn-outline-danger" for="vbtn-radio3">Radio 3</label>
            </div>
        </div>
    </div>
Social Group Buttons
<div class="btn-group" role="group" aria-label="Basic example">
        <button class="btn btn-icon btn-facebook btn-wave">
            <i class="ri-facebook-line"></i>
        </button>
        <button class="btn btn-icon btn-twitter btn-wave">
            <i class="ri-twitter-x-line"></i>
        </button>
        <button class="btn btn-icon btn-instagram btn-wave">
            <i class="ri-instagram-line"></i>
        </button>
        <button class="btn btn-icon btn-github btn-wave">
            <i class="ri-github-line"></i>
        </button>
        <button class="btn btn-icon btn-youtube btn-wave">
            <i class="ri-youtube-line"></i>
        </button>
        <button class="btn btn-icon btn-google btn-wave">
            <i class="ri-google-line"></i>
        </button>
    </div>