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 Groups
Button groups allow multiple buttons to be stacked together on a single pne. This is useful when you want to place items pke apgnment buttons together. You can add on optional JavaScript radio and checkbox style behavior with
.Following table summarizes the important classes Bootstrap provides to use button groups −
Class | Description | Code Sample |
---|---|---|
.btn-group | This class is used for a basic button group. Wrap a series of buttons with class .btn in .btn-group. |
<span class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </span> |
.btn-toolbar | This helps to combine sets of <span class = "btn-group"> into a <span class = "btn-toolbar"> for more complex components. |
<span class = "btn-toolbar" role = "toolbar"> <span class = "btn-group">...</span> <span class = "btn-group">...</span> </span> |
.btn-group-lg, .btn-group-sm, .btn-group-xs | These classes can be appped to button group instead of resizing each button. |
<span class = "btn-group btn-group-lg">...</span> <span class = "btn-group btn-group-sm">...</span> <span class = "btn-group btn-group-xs">...</span> |
.btn-group-vertical | This class make a set of buttons appear vertically stacked rather than horizontally. |
<span class = "btn-group-vertical"> ... </span> |
Basic Button Group
The following example demonstrates the use of class .btn-group discussed in the above table −
<span class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </span>
Button Toolbar
The following example demonstrates the use of class .btn-toolbar discussed in the above table −
<span class = "btn-toolbar" role = "toolbar"> <span class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </span> <span class = "btn-group"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </span> <span class = "btn-group"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </span> </span>
Button Size
The following example demonstrates the use of class .btn-group-* discussed in the above table −
<span class = "btn-group btn-group-lg"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <button type = "button" class = "btn btn-default">Button 3</button> </span> <span class = "btn-group btn-group-sm"> <button type = "button" class = "btn btn-default">Button 4</button> <button type = "button" class = "btn btn-default">Button 5</button> <button type = "button" class = "btn btn-default">Button 6</button> </span> <span class = "btn-group btn-group-xs"> <button type = "button" class = "btn btn-default">Button 7</button> <button type = "button" class = "btn btn-default">Button 8</button> <button type = "button" class = "btn btn-default">Button 9</button> </span>
Nesting
You can nest button groups within another button group i.e, place a .btn-group within another .btn-group . This is done when you want dropdown menus mixed with a series of buttons.
<span class = "btn-group"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <span class = "btn-group"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <p><a href = "#">Dropdown pnk 1</a></p> <p><a href = "#">Dropdown pnk 2</a></p> </ul> </span> </span>
Vertical Buttongroup
The following example demonstrates the use of class .btn-group-vertical discussed in the above table −
<span class = "btn-group-vertical"> <button type = "button" class = "btn btn-default">Button 1</button> <button type = "button" class = "btn btn-default">Button 2</button> <span class = "btn-group-vertical"> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> Dropdown <span class = "caret"></span> </button> <ul class = "dropdown-menu"> <p><a href = "#">Dropdown pnk 1</a></p> <p><a href = "#">Dropdown pnk 2</a></p> </ul> </span> </span>Advertisements