Группа кнопок Bootstrap позволяет группировать кнопки по горизонтали или вертикали.
Горизонтальная группа кнопок
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Таиланд</button>
<button type="button" class="btn btn-primary">Камбоджа</button>
<button type="button" class="btn btn-primary">Вьетнам</button>
</div>
Вертикальная группа кнопок
Замените класс .btn-group на .btn-group-vertical, чтобы группа кнопок располагалась вертикально.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-primary">Таиланд</button>
<button type="button" class="btn btn-primary">Камбоджа</button>
<button type="button" class="btn btn-primary">Вьетнам</button>
</div>
Размер группы кнопок
Bootstrap позволяет управлять размером всех кнопок в группе (чтобы не менять каждую кнопку по отдельности).
Для этого добавьте класс .btn-group-sm или .btn-group-lg к классу .button-group, чтобы сделать все кнопки в группе маленькими или большими.
Если не добавлять эти классы, то группа кнопок будет иметь размер по умолчанию.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-primary">Маленькая</button>
<button type="button" class="btn btn-primary">Маленькая</button>
<button type="button" class="btn btn-primary">Маленькая</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Размер по умолчанию</button>
<button type="button" class="btn btn-primary">Размер по умолчанию</button>
<button type="button" class="btn btn-primary">Размер по умолчанию</button>
</div>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary">Большая</button>
<button type="button" class="btn btn-primary">Большая</button>
<button type="button" class="btn btn-primary">Большая</button>
</div>
<style>
div {margin:10px;}
</style>
Кнопка панели инструментов
При необходимости вы можете объединить группы кнопок в одну панель инструментов. Для этого вложите группу кнопок в элемент <div> с классом .btn-toolbar.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-primary">Группа 1</button>
<button type="button" class="btn btn-primary">Группа 1</button>
</div>
<div class="btn-group me-2" role="group">
<button type="button" class="btn btn-primary">Группа 2</button>
<button type="button" class="btn btn-primary">Группа 2</button>
</div>
</div>
Используйте любой из служебных классов, чтобы добавить пространство между группами кнопок. Например, применение класса .me-2 к группе кнопок добавит небольшое поле справа от этой группы кнопок.
Комбинирование выпадающих меню с группами кнопок
Вы можете вложить выпадающее меню в группу кнопок, используя для этого отдельную группу кнопок, а затем вложив её в другую.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="btn-group" role="group" aria-label="Группа кнопок с выпадающим меню">
<button type="button" class="btn btn-primary">Купить</button>
<button type="button" class="btn btn-primary">Продать</button>
<div class="btn-group" role="group">
<button id="about-us" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
О нас
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">История</a></li>
<li><a class="dropdown-item" href="#">Команда</a></li>
<li><a class="dropdown-item" href="#">Контакты</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>