How to Create Button Groups in Bootstrap 5

Button Group in Bootstrap 5

In order to create a series of buttons in a single horizontal line or stack in a vertical column, you may create button groups in Bootstrap 5.

For example, creating button groups for next/previous, and first/last navigation. Similarly, cut/copy/paste button group and so on.

All you need to do is wrap a series of buttons with .btn class in .btn-group class.

Quick Demos Online:

• Simple button group
• Outlined
• Checkboxes button group
• Radio button group
• Sizing
• Vertically aligned
• Nested button group

See the examples below.

An example of a simple button group

As mentioned in the above section, you need to use:

• .btn series of buttons in button group class i.e. btn-group.
• Ensure that the correct value is assigned to the role attribute. For example, the value for button group should be role = “group”.

See an example below where we created a button group consisting of three buttons.

See online demo and code

An example of using links as button group

You may also assign .btn classes to the <a> tag in order to create a button group. See an example below:

See online demo and code

Using outlined style buttons in button group example

You may also create button groups with an outline style. For that, you need to use outline-style classes for buttons. See an example below:

See online demo and code

The following outline classes for buttons are available:

• btn-outline-primary
• btn-outline-secondary
• btn-outline-success
• btn-outline-danger
• btn-outline-warning
• btn-outline-info
• btn-outline-light
• btn-outline-dark

Learn more about Bootstrap 5 buttons

Using checkboxes button group example

Bootstrap 5 also enables you to create checkbox and radio button groups. These are basically toggle button groups.

See an example below:

See online demo and code

A radio button group example

Similarly, create radio button groups by using .btn-group. Remember to map the id of <input> and “for” of the <label>.

Also, you need to change the name of the radio group to make multiple radio button groups on a single web page.

See this example where we created two radio button groups.

See online demo and code

Creating large and small size button groups example

Normally, you have to specify the button size classes (.btn-lg for large and .btn-sm for small) for each button separately as using the Bootstrap framework.

However, as using button groups, you just need to assign the size class to .btn-group. Following sizing classes are available:

• btn-group-lg (large buttons)
• btn-group-small (small button)
• btn-group (normal size)

The example below shows using all three size buttons. There we used font awesome icons in buttons:

See online demo and code

An example of vertically aligned button group

By using .btn-group-vertical class, you may create vertically aligned buttons.

See online demo and code

In this way, you may also create checkbox and radio button groups as well.

Using nested button group example

You may use a button group within another group. That is called a nested button group. This can be useful in scenarios where you need to place a dropdown within a series of buttons.

The following example shows its usage:

By using .btn-group-vertical class, you may create vertical aligned buttons.

See online demo and code