Bootstrap 5 Группа кнопок Смешанные стили

Группа кнопок Bootstrap 5 — это компонент, который помогает объединять кнопки в серии в одну строку. В смешанных стилях группы кнопок мы можем создать группу кнопок с разными цветами фона.

Группа кнопок Используемые смешанные стили Классы:

• .btn-group: этот класс используется для группировки кнопок в одной строке.
• .btn: этот класс используется для создания кнопки.
• .btn-{color_utility}: этот класс используется для установки цвета кнопки.

Синтаксис:

<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-*">
        Content
    </button> 
    ...
</div>

Примечание: * можно заменить служебными классами цвета.

Пример 1: В этом примере мы создадим 3 кнопки со смешанными стилями.

Выход:

Пример 2: В этом примере мы увидим кнопки со смешанными стилями.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/components/button-group/#mixed-styles