Logo

Basic Example

Wrap a series of buttons with .btnin .btn-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" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-success">Left</button>
                                <button type="button" class="btn btn-success">Middle</button>
                                <button type="button" class="btn btn-success">Right</button>
                            </div>
                            <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>

Sizing

Add .btn-group-*to each .btn-group, including each one when nesting multiple groups for different sizes.



                        <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
                            <button type="button" class="btn btn-outline-secondary">Left</button>
                            <button type="button" class="btn btn-outline-secondary">Middle</button>
                            <button type="button" class="btn btn-outline-secondary">Right</button>
                        </div>
                        <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
                            <button type="button" class="btn btn-outline-secondary">Left</button>
                            <button type="button" class="btn btn-outline-secondary">Middle</button>
                            <button type="button" class="btn btn-outline-secondary">Right</button>
                        </div>
                        <div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
                            <button type="button" class="btn btn-outline-secondary">Left</button>
                            <button type="button" class="btn btn-outline-secondary">Middle</button>
                            <button type="button" class="btn btn-outline-secondary">Right</button>
                        </div>

Vertical Variation

Add btn-group-verticalto vertically stack buttons.


                        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-outline-secondary">Button</button>
                            <button type="button" class="btn btn-outline-secondary">Button</button>
                            <button type="button" class="btn btn-outline-secondary">Button</button>
                        </div>

Make a set of buttons appear vertically with a dropdown menu.


                        <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                            <button type="button" class="btn btn-outline-secondary">Button</button>
                            <button type="button" class="btn btn-outline-secondary">Button</button>
                            <div class="btn-group" role="group">
                                <button id="btnGroupVerticalDrop1" type="button" class="btn btn-outline-secondary dropdown-toggle" data-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-outline-secondary">Button</button>
                             <button type="button" class="btn btn-outline-secondary">Button</button>
                        </div>

Nesting

Place a .btn-groupwithin another .btn-groupwhen you want nested dropdown menus mixed with a series of buttons.


                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                            <button type="button" class="btn btn-primary font-weight-bold">1</button>
                            <button type="button" class="btn btn-success font-weight-bold">2</button>
                            <button type="button" class="btn btn-danger font-weight-bold">3</button>
                            <button type="button" class="btn btn-warning font-weight-bold">4</button>
                            <button type="button" class="btn btn-warning font-weight-bold">5</button>
                            <button type="button" class="btn btn-warning font-weight-bold">6</button>

                            <div class="btn-group" role="group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-dark font-weight-bold dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                                </button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                    <a class="dropdown-item" href="#">Dropdown link</a>
                                </div>
                            </div>
                        </div>

Buttons Toolbar

Combine sets of button groups into button toolbars for more complex components. Use utility classes to set the appropriate spacing and sizes.


                        <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>

Use sets of button groups with icons.


                        <div class="btn-toolbar" role="toolbar" aria-label="...">
                            <div class="btn-group mr-2" role="group" aria-label="...">
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-file-text-o"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-bold"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-paperclip"></i></button>
                            </div>
                            <div class="btn-group mr-2" role="group" aria-label="...">
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-floppy-o"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-files-o"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-header"></i></button>
                            </div>
                            <div class="btn-group" role="group" aria-label="...">
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-scissors"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-unlink"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-italic"></i></button>
                            </div>
                        </div>

Mix input groups with button groups in your toolbars. Use utility classes to set the appropriate spacing and sizes.


                        <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                            <div class="btn-group mr-2" role="group" aria-label="First group">
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-file-text-o"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-floppy-o"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-header"></i></button>
                                <button type="button" class="btn btn-outline-secondary btn-icon"><i class="la la-italic"></i></button>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text" id="btnGroupAddon">@</span></div>
                                <input type="text" class="form-control" placeholder="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" role="group" aria-label="First group">
                                <button type="button" class="btn btn-primary  btn-icon"><i class="la la-file-text-o"></i></button>
                                <button type="button" class="btn btn-success btn-icon"><i class="la la-paperclip"></i></button>
                                <button type="button" class="btn btn-warning btn-icon"><i class="la la-files-o"></i></button>
                                <button type="button" class="btn btn-info btn-icon"><i class="la la-scissors"></i></button>
                            </div>
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text" id="btnGroupAddon2">@</span></div>
                                <input type="text" class="form-control" placeholder="Input group example" aria-describedby="btnGroupAddon2"/>
                            </div>
                        </div>

User Profile 12 messages

Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo