Home Bootstrap 5 BasicsBS5 Button Groups

BBS5 Button Groups

Learn how to group buttons together.

BS5 Button Groups

Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:

Use a <div> element with class .btn-group to create a button group.

Vertical Button Group

Use the class .btn-group-vertical to create a vertical button group.

Nesting Button Groups & Dropdown Menus

Nest button groups to create dropdown menus.

Examples

Basic Button Group

html/css

Buttons grouped together.

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Vertical Button Group

html/css

Buttons stacked vertically.

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

BBS5 Button Groups

BS5 Button Groups

Vertical Button Group

Nesting Button Groups & Dropdown Menus

Examples

Basic Button Group

Vertical Button Group

Test Your Knowledge

1. Which class groups buttons together horizontally?

2. Can you create a vertical button group?

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

BBS5 Button Groups

BS5 Button Groups

Vertical Button Group

Nesting Button Groups & Dropdown Menus

Examples

Basic Button Group

Vertical Button Group

Test Your Knowledge

1. Which class groups buttons together horizontally?

2. Can you create a vertical button group?