Button Group

Button groups allow you to group a series of buttons together, either horizontally or vertically.

Basic Example #

    

        

            
            
            
        
    
    

        
        
HTML
        
    
    <div class="btn-group p-5">
    <button type="button" class="btn btn-primary btn-text-color"><i class="fa-solid fa-house"></i></button>
    <button type="button" class="btn btn-primary btn-text-color"><i class="fa-solid fa-book-bookmark"></i></button>
    <button type="button" class="btn btn-primary btn-text-color active"><i class="fa-solid fa-external-link"></i></button>
</div>

Text Button Group #

    

        

            Left
            Middle
            Right
        
    
    

        
        
HTML
        
    
    <div class="btn-group p-5">
    <button type="button" class="btn btn-primary btn-text-color">Left</button>
    <button type="button" class="btn btn-primary btn-text-color">Middle</button>
    <button type="button" class="btn btn-primary btn-text-color active">Right</button>
</div>

Vertical Button Group #

    

        

            
            
            
        
    
    

        
        
HTML
        
    
    <div class="btn-group p-5 flex-column">
    <button type="button" class="btn btn-primary btn-text-color"><i class="fa-solid fa-house"></i></button>
    <button type="button" class="btn btn-primary btn-text-color"><i class="fa-solid fa-book-bookmark"></i></button>
    <button type="button" class="btn btn-primary btn-text-color active"><i class="fa-solid fa-external-link"></i></button>
</div>
    

Classes #