Группы кнопок Bootstrap позволяют объединять кнопки по горизонтали или по вертикали.
Горизонтальная группа кнопок
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 к классу .btn-group, чтобы все кнопки в группе стали маленькими или большими.
Отказ от этих классов приведёт к тому, что размер кнопок в группе установится по умолчанию.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 scoped>
div {margin:10px;}
</style>
Bootstrap 3 поддерживает группы кнопок сверхмалого размера с классом .btn-group-xs, но в Bootstrap 4 это было исключено.
Панель инструментов с кнопками
При необходимости вы можете объединить группы кнопок в одну панель инструментов. Для этого вложите группу кнопок в элемент <div> с классом .btn-toolbar.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group mr-2" role="group">
<button type="button" class="btn btn-primary">Группа 1</button>
<button type="button" class="btn btn-primary">Группа 1</button>
<button type="button" class="btn btn-primary">Группа 1</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Группа 2</button>
<button type="button" class="btn btn-primary">Группа 2</button>
</div>
</div>
Используйте любой из служебных классов для добавления пространства между группами кнопок. Например, применение mr-2 к группе кнопок добавит небольшое поле справа.
Объединение выпадающего меню с группой кнопок
Вы можете вкладывать раскрывающиеся меню в группы кнопок, используя отдельную группу кнопок для раскрывающегося меню, а затем вложив эту группу в другую.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Купить</button>
<button type="button" class="btn btn-primary">Продать</button>
<div class="btn-group" role="group">
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">О нас</button>
<div class="dropdown-menu" aria-labelledby="about-us">
<a class="dropdown-item" href="#">Наша история</a>
<a class="dropdown-item" href="#">Наша команда</a>
<a class="dropdown-item" href="#">Контакты</a>
</div>
</div>
</div>
Выпадающее меню с разделённой зоной
Используйте группы кнопок для создания выпадающего меню с разделённой зоной.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group">
<button type="button" class="btn btn-success">О нас</button>
<button type="button" class="btn btn-success dropdown-toggle"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Наша история</a>
<a class="dropdown-item" href="#">Наша команда</a>
<a class="dropdown-item" href="#">Контакты</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>