<!-- Basic Horizontal Button Group -->
            <div class="btn-group" role="group">
            <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>

            <!-- Outline Button Group -->
            <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-primary">First</button>
            <button type="button" class="btn btn-outline-primary">Second</button>
            <button type="button" class="btn btn-outline-primary">Third</button>
            </div>

<!-- Vertical Button Group -->
            <div class="btn-group-vertical" role="group">
            <button type="button" class="btn btn-secondary">Top</button>
            <button type="button" class="btn btn-secondary">Middle</button>
            <button type="button" class="btn btn-secondary">Bottom</button>
            </div>

            <!-- Vertical Outline Group -->
            <div class="btn-group-vertical" role="group">
            <button type="button" class="btn btn-outline-success">Option 1</button>
            <button type="button" class="btn btn-outline-success">Option 2</button>
            <button type="button" class="btn btn-outline-success">Option 3</button>
            </div>

<!-- Button Toolbar -->
            <div class="btn-toolbar" role="toolbar">
            <!-- First group -->
            <div class="btn-group me-2" role="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>
            </div>
            
            <!-- Second group -->
            <div class="btn-group me-2" role="group">
                <button type="button" class="btn btn-outline-secondary">4</button>
                <button type="button" class="btn btn-outline-secondary">5</button>
            </div>
            </div>

            <!-- Toolbar with Icons -->
            <div class="btn-toolbar" role="toolbar">
            <div class="btn-group me-2" role="group">
                <button type="button" class="btn btn-primary">
                <i class="bi bi-bold"></i>
                </button>
                <button type="button" class="btn btn-primary">
                <i class="bi bi-italic"></i>
                </button>
            </div>
            </div>

<!-- Large Button Group -->
            <div class="btn-group btn-group-lg" role="group">
            <button type="button" class="btn btn-primary">Large</button>
            <button type="button" class="btn btn-primary">Buttons</button>
            </div>

            <!-- Default Size Group -->
            <div class="btn-group" role="group">
            <button type="button" class="btn btn-secondary">Default</button>
            <button type="button" class="btn btn-secondary">Size</button>
            </div>

            <!-- Small Button Group -->
            <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-success">Small</button>
            <button type="button" class="btn btn-success">Buttons</button>
            </div>

<!-- Mixed Solid and Outline -->
            <div class="btn-group" role="group">
            <button type="button" class="btn btn-danger">Delete</button>
            <button type="button" class="btn btn-outline-danger">Cancel</button>
            </div>

            <!-- Different Colors in Group -->
            <div class="btn-group" role="group">
            <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>
            </div>

            <!-- Icons and Text Mix -->
            <div class="btn-group" role="group">
            <button type="button" class="btn btn-outline-warning">
                <i class="bi bi-star"></i>
            </button>
            <button type="button" class="btn btn-warning">
                <i class="bi bi-star-fill"></i> 4.5
            </button>
            </div>

<!-- Nested Button Group with Dropdown -->
            <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">Action</button>
            
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary dropdown-toggle" 
                        data-bs-toggle="dropdown">
                Dropdown
                </button>
                <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else</a></li>
                </ul>
            </div>
            </div>