Hit enter after type your search item

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:

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

Bootstrap5-button-group

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

Bootstrap5-button-link

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

Bootstrap5-button-outl


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

BS5-group-checbox-btn

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

BS5-group-radio-btn

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

BS5-group-sizes

An example of vertically aligned button group

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

See online demo and code

BS5-group-vertical-btn


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

BS5-group-nested


 
This div height required for enabling the sticky sidebar