Bootstrap 5 TutorialLesson 13Free preview

BS5 Button Groups

This lesson is part of Bootstrap · All levels

Summary

.btn-group combines several buttons in a row of close together without any distance between them, usually used for action toolbars or alternative options. Compare this to .btn-toolbar which wrap some .btn-group to set the distance periodically. For buttons that extend vertically use .btn-group-vertical.

Key points

Fix the button in one row.
It makes the buttons stack vertically. (.btn-group-vertical)
.btn-toolbar wrapped several .btn-group with group spacing.
.btn-group-lg and .btn-group-sm set the size of the entire group.
The button toggle is activated with data-bs-toggle="button".

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.