Bootstrap Button Groups

In this tutorial you will learn how to use Bootstrap button group component.

Creating Button Group with Bootstrap

In the previous chapter you've learnt how to create different types of individual buttons and modify them with predefined classes. Bootstrap however, also allows you to group a series of buttons together in a single line through the button group component.

To create a button groups just wrap a series of buttons in a <div> element and apply the class .btn-group on it, like shown in the example below:

— 上面示例的输出将如下所示：

You can also make the button groups appear vertically stacked rather than horizontally. To do this just replace the class .btn-group with the .btn-group-vertical.

---

Creating Button Toolbar

You can also combine sets of button groups together for creating more complex components like button toolbar. To create button toolbar just wrap sets of button groups in a <div> element and apply the class .btn-toolbar on it.

— 上面示例的输出将如下所示：

---

Height Sizing of Button Groups

You can also apply relative sizing classes like .btn-group-lg, .btn-group-sm or .btn-group-xs on button groups to create larger or smaller button groups. Just add these button sizing classes directly to the .btn-group, instead of applying to every button.

— 上面示例的输出将如下所示：

---

Creating Justified Button Groups

You can also make a group of buttons stretch at the same size to span the entire width of its parent by appling an extra class .btn-group-justified to the .btn-group base class.

The following example will create a justified button group using the <a> element.

— 上面示例的输出将如下所示：

However, to create justified button groups using the <button> elements, you must wrap each button individually in a .btn-group class, otherwise it will not work.

The story doesn't ends here; in the advanced section you'll learn how to create button dropdowns as well as stateful buttons through activating the toggling and loading state on simple buttons and the button groups component.