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.
Keen extends Bootstrap Button-Groupwith a variety of options to provide unique looking button groups that match Keen's design standards.
For more info on the original Bootstrap Button-Group please visit the official Bootstrap Documentation.

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

Recent Notifications

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9