Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.

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>

Quick Actions finance & reports

User Profile 12 messages

James Jones
Application Developer
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