bootstrap5 button

(btn btn-primary)

btn btn-primary

(btn btn-secondary btn-block)

btn btn-secondary btn-block

gray-600

(btn btn-success)

btn btn-success

green

(btn btn-danger)

btn btn-danger

red

(btn btn-warning)

btn btn-warning

yellow

(btn btn-info)

btn btn-info

cyan

(btn btn-light)

btn btn-light

(btn btn-dark text-nowrap)

btn btn-dark text-nowrap

(btn btn-outline-primary)

btn btn-outline-primary

ボタンの背景色を透過

(btn btn-secondary btn-lg)

btn btn-secondary btn-lg

lg size

(btn btn-success btn-sm)

btn btn-success btn-sm

sm size

(btn btn-danger disabled)

btn btn-danger disabled

pointer-events:none

(d-grid gap-2 d-md-block)

d-grid gap-2 d-md-block

block button

(data-bs-toggle="button" class="btn btn-primary active")

data-bs-toggle="button" class="btn btn-primary active"

(data-bs-toggle="button")

data-bs-toggle="button"

クリックするごとにアクティブ状態がトグルする

(btn-toolbar)

btn-toolbar

ボタングループから構成されるツールバー

(btn-group btn-group-lg)

btn-group btn-group-lg

(btn-group)

btn-group

(btn-group btn-group-sm)

btn-group btn-group-sm

(btn-group-vertical)

btn-group-vertical

ボタングループのボタンを縦方向に並べる