Для стилизации кнопки используйте класс .btn, а затем желаемый стиль. Например, class="btn btn-primary" даёт основную кнопку.
Вот код, используемый для всех девяти стилей кнопок:
<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>
<button type="button" class="btn btn-primary">Основная</button>
<button type="button" class="btn btn-secondary">Вторичная</button>
<button type="button" class="btn btn-info">Инфо</button>
<button type="button" class="btn btn-success">Успех</button>
<button type="button" class="btn btn-warning">Предупреждение</button>
<button type="button" class="btn btn-danger">Опасность</button>
<button type="button" class="btn btn-light">Светлая</button>
<button type="button" class="btn btn-dark">Тёмная</button>
<button type="button" class="btn btn-link">Ссылка</button>
Элементы кнопок
Стили кнопок Bootstrap 5 предназначены для использования с элементом <button>, но их также можно применять к элементам <input> и <a>.
<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>
<a class="btn btn-primary" href="#" role="button">Ссылка</a>
<button class="btn btn-primary" type="submit">Кнопка</button>
<input class="btn btn-primary" type="button" value="Ввод">
<input class="btn btn-primary" type="submit" value="Отправка">
При использовании элемента <a> в качестве кнопки (например, запуска клиентского скрипта вместо перехода к другому адресу) указывайте role="button".
По возможности рекомендуется использовать элемент <button>, поскольку он обеспечивает наилучшую согласованность между браузерами.
Контурные кнопки
Используйте классы .btn-outline-* для применения семантического цвета только к контуру кнопки.
<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>
<button type="button" class="btn btn-outline-primary">Основная</button>
<button type="button" class="btn btn-outline-secondary">Вторичная</button>
<button type="button" class="btn btn-outline-info">Инфо</button>
<button type="button" class="btn btn-outline-success">Успех</button>
<button type="button" class="btn btn-outline-warning">Предупреждение</button>
<button type="button" class="btn btn-outline-danger">Опасность</button>
<button type="button" class="btn btn-outline-light">Светлая</button>
<button type="button" class="btn btn-outline-dark">Тёмная</button>
Размер кнопки
Вы можете указать размер кнопки с помощью классов .btn-lg и .btn-sm. Вставьте их в дополнение к другим классам кнопок. Вот так:
<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>
<button type="button" class="btn btn-success btn-sm">Маленькая</button>
<button type="button" class="btn btn-success">По умолчанию</button>
<button type="button" class="btn btn-success btn-lg">Большая</button>
Блочные кнопки
Кнопки Bootstrap 4 включали класс .btn-block для создания блочных кнопок, но он не вошёл в Bootstrap 5.
Блочные кнопка занимает всю ширину своего родителя. В Bootstrap 5 вы можете создать такую с помощью различных служебных классов. Вот пример:
<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="d-grid gap-2">
<button class="btn btn-primary" type="button">Блочная кнопка</button>
</div>
Отключенные кнопки
Bootstrap предлагает определённые стили для состояния disabled (а также для других состояний, например active).
Если вам нужно отключить кнопку, использующую элемент <a>, вы можете указать класс .disabled. Вам не нужно делать это с кнопками, которые используют элементы <button> и <input>. Чтобы отключить эти кнопки, используйте стандартный HTML-атрибут disabled.
Вот пример отключения кнопок разных типов:
<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>
<p><a href="#" class="btn btn-primary btn-lg disabled" role="button">Элемент «a»</a></p>
<p><button type="button" class="btn btn-lg btn-primary" disabled="disabled">Элемент «button»</button></p>
<p><input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="Элемент «input»"></p>
Переключаемые флажки и радиокнопки
Bootstrap 5 включает плагин для кнопок, который позволяет создавать кнопки включения и выключения. Инструкцию по работе с ним смотрите в документации Bootstrap 5.