Bootstrap Button Groups

You can add .btn-group class to put all buttons together in one single line.

Code Structure:
<div class="container">
    <h3>Button Group</h3>
    <div class="btn-group">
        <a href="#" class="btn btn-primary">Home</a>
        <a href="#" class="btn btn-primary">About</a>
        <a href="#" class="btn btn-primary">Contact</a>
    </div>
</div>
You can apply different button size using .btn-group-* classes

Code Structure:
<div class="container">
    <h3>Button Group with Button size</h3>
    <div class="btn-group btn-group-lg">
        <a href="#" class="btn btn-primary">Home</a>
        <a href="#" class="btn btn-primary">About</a>
        <a href="#" class="btn btn-primary">Contact</a>
    </div>
</div>
You can add .btn-group-vertical class to put buttons in vertical way.

Code Structure:
<div class="container">
    <h3>Vertical Button Group</h3>
    <div class="btn-group-vertical">
        <a href="#" class="btn btn-primary">Home</a>
        <a href="#" class="btn btn-primary">About</a>
        <a href="#" class="btn btn-primary">Contact</a>
    </div>
</div>
You can add .btn-group-justified class to use entire width of its parent element and set up button in justified way.

Code Structure:
<div class="container">
    <h3>Justified Button Group</h3>
    <div class="btn-group btn-group-justified">
        <a href="#" class="btn btn-primary">Home</a>
        <a href="#" class="btn btn-primary">About</a>
        <a href="#" class="btn btn-primary">Contact</a>
    </div>
</div>
For ‘button’ element, you have to wrap ‘button’ by using .btn-group class.

Code Structure:
<div class="container">
    <h3>Justified Button Group for <pre><button></pre> element</h3>
    <div class="btn-group btn-group-justified">
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Home</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">About</button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Contact</button>
        </div>
    </div>
</div>

Share this

Related Posts