Кнопки и группы кнопок

Компонент Bootstrap — готовый элемент интерфейса из нескольких классов: кнопка, карточка, меню. Кнопка — самый простой из них. Базовый класс btn даёт размеры, отступы и реакцию на наведение, а второй класс выбирает цвет.

Цвета

К btn добавляют btn-{цвет} с любым цветом темы:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<button type="button" class="btn btn-primary">Создать задачу</button>
<button type="button" class="btn btn-secondary">Архив</button>
<button type="button" class="btn btn-danger">Удалить</button>
<button type="button" class="btn btn-link">Подробнее</button>

Синяя, серая и красная кнопки плюс кнопка, похожая на ссылку. Наведите курсор — фон каждой станет темнее.

Контурные кнопки

Классы btn-outline-{цвет} дают кнопку с рамкой и прозрачным фоном. Её ставят рядом с главной кнопкой для второстепенного действия:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<button type="button" class="btn btn-primary">Начать бесплатно</button>
<button type="button" class="btn btn-outline-primary">Посмотреть демо</button>

Это пара кнопок для первого экрана лендинга: залитая привлекает внимание, контурная остаётся в тени.

Размеры и состояния

Классы btn работают и на ссылке: <a class="btn btn-primary" href="/signup" role="button"> выглядит как кнопка, но ведёт на другую страницу. Используйте <button> для действий на странице и <a> — для перехода.

Несколько кнопок на всю ширину

Стопку кнопок одинаковой ширины удобно собрать сеткой d-grid с промежутком:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="d-grid gap-2" style="max-width: 320px">
  <button type="button" class="btn btn-primary btn-lg">Войти</button>
  <button type="button" class="btn btn-outline-secondary" disabled>Войти через SSO</button>
</div>

Обе кнопки растянуты на ширину блока; вторая бледная и не нажимается.

Группы кнопок

btn-group склеивает кнопки в один блок — получается переключатель:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 
<div class="btn-group" role="group" aria-label="Период">
  <button type="button" class="btn btn-outline-primary active">День</button>
  <button type="button" class="btn btn-outline-primary">Неделя</button>
  <button type="button" class="btn btn-outline-primary">Месяц</button>
</div>

Три кнопки стоят вплотную с общими скруглёнными краями, первая выделена. Такой выбор периода стоит над графиком админ-панели. btn-group-vertical ставит кнопки в столбец, а btn-toolbar объединяет несколько групп в панель.

Частая ошибка

Писать <button> без атрибута type внутри формы. По умолчанию кнопка в форме имеет тип submit, и нажатие «Отмена» отправит форму. Всегда указывайте type="button" для кнопок, которые не отправляют форму, и type="submit" — для той, что отправляет.