Bootstrap Tutorial
Bootstrap with CSS
Bootstrap Layout Components
Bootstrap Plugins
Bootstrap Demos
Bootstrap Useful Resources
Selected Reading
Bootstrap with CSS
- Bootstrap - Responsive utilities
- Bootstrap - Helper Classes
- Bootstrap - Images
- Bootstrap - Buttons
- Bootstrap - Forms
- Bootstrap - Tables
- Bootstrap - Code
- Bootstrap - Typography
- Bootstrap - CSS Overview
- Bootstrap - Grid System
Bootstrap Layout Components
- Bootstrap - Wells
- Bootstrap - Panels
- Bootstrap - List Group
- Bootstrap - Media Object
- Bootstrap - Progress Bars
- Bootstrap - Alerts
- Bootstrap - Thumbnails
- Bootstrap - Page Header
- Bootstrap - Jumbotron
- Bootstrap - Badges
- Bootstrap - Labels
- Bootstrap - Pagination
- Bootstrap - Breadcrumb
- Bootstrap - Navbar
- Bootstrap - Navigation Elements
- Bootstrap - Input Groups
- Bootstrap - Button Dropdowns
- Bootstrap - Button Groups
- Bootstrap - Dropdowns
- Bootstrap - Glyphicons
Bootstrap Plugins
- Bootstrap - Affix Plugin
- Bootstrap - Carousel Plugin
- Bootstrap - Collapse Plugin
- Bootstrap - Button Plugin
- Bootstrap - Alert Plugin
- Bootstrap - Popover Plugin
- Bootstrap - Tooltip Plugin
- Bootstrap - Tab Plugin
- Bootstrap - Scrollspy Plugin
- Bootstrap - Dropdown Plugin
- Bootstrap - Modal Plugin
- Bootstrap - Transition Plugin
- Bootstrap - Plugins Overview
Bootstrap Demos
- Bootstrap - featured Demo
- Bootstrap - Icons Demo
- Bootstrap - Social Icons Demo
- Bootstrap - Calendar Demo
- Bootstrap - Map Demo
- Bootstrap - Caption Demo
- Bootstrap - Tabbed slider Demo
- Bootstrap - Ajax Demo
- Bootstrap - Admin Interface Demo
- Bootstrap - Alert Demo
- Bootstrap - Time line Demo
- Bootstrap - Slider Demo
- Bootstrap - Material Design Demo
- Bootstrap - Blog Demo
- Bootstrap - Navigation Demo
- Bootstrap - Responsive Demo
- Bootstrap - Images Demo
- Bootstrap - Buttons Demo
- Bootstrap - Form Demo
- Bootstrap - Table Demo
- Bootstrap - Grid Demo
Bootstrap Useful Resources
- Bootstrap - Discussion
- Bootstrap - Useful Resources
- Bootstrap - Quick Guide
- Bootstrap - Questions and Answers
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Bootstrap - Button Dropdowns
Bootstrap - Button Dropdowns
This chapter will discuss about how to add dropdown menu to buttons using Bootstrap classes. To add a dropdown to a button, simply wrap the button and dropdown menu in a .btn-group. You can also use <span class = "caret"></span> to act as an indicator that the button is a dropdown.
The following example demonstrates a basic single button dropdowns −
<span class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
<span class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
Sppt Button Dropdowns
Sppt button dropdowns use the same general style as the dropdown button but add a primary action along with the dropdown. Sppt buttons have the primary action on the left and a toggle on the right that displays the dropdown.
<span class = "btn-group">
<button type = "button" class = "btn btn-default">Default</button>
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
<span class = "btn-group">
<button type = "button" class = "btn btn-primary">Primary</button>
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
<span class = "caret"></span>
<span class = "sr-only">Toggle Dropdown</span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
Button Dropdown Size
You can use the dropdowns with any button size − .btn-large, .btn-sm, or .btn-xs.
<span class = "btn-group">
<button type = "button" class = "btn btn-default dropdown-toggle btn-lg" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
<span class = "btn-group">
<button type = "button" class = "btn btn-primary dropdown-toggle btn-sm" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
<span class = "btn-group">
<button type = "button" class = "btn btn-success dropdown-toggle btn-xs" data-toggle = "dropdown">
Success
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
Dropup Variation
Menus can also be built to drop up rather than down. To achieve this, simply add .dropup to the parent .btn-group container.
<span class = "row" style = "margin-left:50px; margin-top:200px">
<span class = "btn-group dropup">
<button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
Default
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
<span class = "btn-group dropup">
<button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown">
Primary
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<p><a href = "#">Action</a></p>
<p><a href = "#">Another action</a></p>
<p><a href = "#">Something else here</a></p>
<p class = "spanider"></p>
<p><a href = "#">Separated pnk</a></p>
</ul>
</span>
</span>
Advertisements