Search within TutorialsPark

Twitter Bootstrap Button-Groups


To group a series of buttons in a single line using button groups


Twitter Bootstrap: Basic Button Groups

1. To wrap a series of button in a single line use class .btn-group within the parent element.

Example: Twitter Bootstrap Basic Buttons Groups

Give it a TRY! »

Twitter Bootstrap: Button ToolBar

1. A button toolbar can be created by encapsulating sets of .btn-group into a .btn-toolbar.

Example:Twitter Bootstrap Button ToolBar

Give it a TRY! »

Twitter Bootstrap: Button Groups of Various Sizes

1. You need not apply button classes to each and every button, just add .btn-group-* to .btn-group to achieve the same effect.

2. Here, class .btn-group-lg denotes a large button group.

class .btn-group-sm denotes a small button group.

and class .btn-group-xs denotes a extra small button group.

Example:Twitter Bootstrap Button groups of Various Sizes

Give it a TRY! »

Twitter Bootstrap: Nesting Button Groups

1. A nested button group comprising of drop down menus and a series of buttons can be created by placing a .btn-group within another .btn-group.

Example:Twitter Bootstrap Nesting Button Groups

Give it a TRY! »

Twitter Bootstrap: Vertical Button Groups

1. To create a vertically stacked use class btn-group-vertical to encapsulate a button set.

Example:Twitter Bootstrap Vertical Button Groups

Give it a TRY! »

Twitter Bootstrap: Justified button Groups

1. A justified button stretches at equal sizes and spans the entire width of its parent element. It can be applied even to dropdown buttons

2. To create a justified button group use .btn-group.btn-group-justified to encapsulate .btn sets.

Example:Twitter Bootstrap Justified Button Groups

Give it a TRY! »