English 中文(简体)
Bootstrap Tutorial

Bootstrap with CSS

Bootstrap Layout Components

Bootstrap Plugins

Bootstrap Demos

Bootstrap Useful Resources

Selected Reading

Bootstrap - Button Groups
  • 时间:2024-11-03

Bootstrap - Button Groups


Previous Page Next Page  

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 Bootstrap Button Plugin.

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>