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>

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Demo 23
Demo 24
Demo 25
Demo 26
Demo 27
Demo 28
Demo 29
Demo 30