Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Stockholm-icons / General / User Created with Sketch.
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keen extends Bootstrap Button-Group with 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 .btn in .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-vertical to 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-group within another .btn-group when 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 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

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

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

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

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

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

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

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

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

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

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

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

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.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

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