Core Code
Core Code Modern Dev Handbook

Button Group Sizes

Adjust button group size using btn-group-lg or btn-group-sm.

Preview

Code

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

<div class="container py-5">

<div class="btn-group btn-group-lg mb-3">
<button class="btn btn-primary">Large</button>
<button class="btn btn-primary">Buttons</button>
</div>

<br>

<div class="btn-group btn-group-sm">
<button class="btn btn-secondary">Small</button>
<button class="btn btn-secondary">Buttons</button>
</div>

</div>

</body>
</html>

More BS5 Button Groups Examples (7)

example Basic Button Group open example example Outline Button Group open example example Vertical Button Group open example example Button Toolbar open example example Toggle Button Group open example example Button Group with Dropdown open example example Pagination Style Buttons open example