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.

Single Button

Turn any .btninto a dropdown toggle with some markup changes. Here’s how you can put them to work with <button>.


                        <div class="dropdown">
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown button
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>

Turn single icon buttons into a dropdown toggle with some markup changes.


                        <div class="dropdown dropdown-inline mr-4">
                            <button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ki ki-bold-more-hor"></i>
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

                        <div class="dropdown dropdown-inline">
                            <button type="button" class="btn btn-light-primary btn-icon btn-sm" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ki ki-bold-more-ver"></i>
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

You can do this with any button variant as well:


                        <!-- Example single danger button-->
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
                          <div class="dropdown-menu">
                              ...
                          </div>
                        </div>

Split Button

Create split button dropdowns with virtually the same markup as single button dropdowns by adding .dropdown-toggle-splitfor proper spacing around the dropdown caret.


                        <div class="btn-group">
                            <button type="button" class="btn btn-primary">Primary</button>
                            <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.


                        <div class="btn-group">
                            <button class="btn btn-primary font-weight-bold btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Large button
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

                        <div class="btn-group">
                            <button class="btn btn-primary font-weight-bold btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Small button
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

Direction

Dropup

Trigger dropdown menus above element by adding .dropupto the parent element.


                        <div class="btn-group dropup">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropup
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>
Dropright

Trigger dropdown menus at the right of the element by adding .droprightto the parent element.


                        <div class="btn-group dropright">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropup
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>
Dropleft

Trigger dropdown menus at the left of the element by adding .dropleftto the parent element.


                        <div class="btn-group dropleft">
                            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropup
                            </button>
                            <div class="dropdown-menu">
                                ...
                            </div>
                        </div>

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.


                        <div class="btn-group">
                            <button class="btn btn-primary font-weight-bold btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Form example
                            </button>
                            <div class="dropdown-menu dropdown-menu-lg">
                                <form class="px-8 py-8">
                                    <div class="form-group">
                                        <label for="exampleDropdownFormEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleDropdownFormPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
                                    </div>
                                    <div class="form-group">
                                        <label class="checkbox">
                                            <input type="checkbox"/> Remember me
                                            <span></span>
                                        </label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Sign in</button>
                                </form>
                                <div class="dropdown-divider"></div>
                                <a class="dropdown-item px-8" href="#">New around here? Sign up</a>
                                <a class="dropdown-item px-8" href="#">Forgot password?</a>
                            </div>
                        </div>

Dropdown options

Use data-offsetor data-referenceto change the location of the dropdown.


                        <div class="dropdown mr-1">
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
                                Offset
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
                                ...
                            </div>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-secondary">Reference</button>
                            <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                                ...
                            </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