What are button groups in Bootstrap 4?

Overview

Let’s start it with Bootstrap, the world’s most popular framework for building responsive, intellectual applications of any kind, with bootstrap CDN and predefined page templates.

Button groups

Button groups are a series of buttons on a single line, combined to show a common functionality. Wrap the <div> element with .btn-group utility class to generate a button group. Let's discuss a basic button group for now then we will elaborate on some different types.

Example

Explanation

• Lines: 3–10: We use Bootstrap CDNContent Delivery Network links to include Bootstrap 4 when the program is executed.
• Lines: 13–17: We place three button tags horizontally, to show a button grid. We implement class=btn-group on the div tag will make it a button grid.

Vertical button groups

To change the appearance or position of buttons vertically, we can implement the btn-group-vertical utility on the div tag.

Example

Explanation

• Lines: 3–9: We use Bootstrap CDNContent Delivery Network links to include Bootstrap 4 at runtime.
• Lines: 13–17: To show grouped buttons vertically, we implement the btn-group-vertical utility from the Bootstrap 4 packages.

Nested button groups

Nested means a similar shape will be placed inside the other. To show button groups as nested, we replicate the same code within the div container of the previous button group div.

Example

Explanation

• Lines: 3–15: We include links to include Bootstrap 4 online when the program is executed.
• Line: 18: Here, the first div tag creates another container for the button group.
• Lines: 19 and 20: We create horizontal buttons.
• Lines: 21–29: Here, the inner button group contains the More button and drops down with two options.