ボタン（Buttons）

基本クラス（Base class）v5.3.0新設

Bootstrapには、パディングやコンテンツの配置などの基本的なスタイルを設定する基本的な .btn クラスがある。デフォルトでは .btn コントロールは透明な罫線と背景色を持ち、明示的なフォーカススタイルとホバースタイルはない。

見本

設定例

<button type="button" class="btn">基本クラス</button>

.btn クラスは、ボタンのバリエーションと組み合わせて使用したり、独自のカスタムスタイルの基礎として使用することが目的。

バリエーション（Variants）v5.2.0スタイル変更、v5.3.0「ボタンの設定」から変更

Bootstrapには、いくつかのボタンの種類があり、それぞれが意味上の目的を果たし、さらにコントロールするためにいくつかの余分なものが加えられている。

ボタンの種類

設定例

デフォルトのボタン<button type="button" class="btn btn-primary">...</button>

角ボタン<button type="button" class="btn btn-primary rounded-0">角ボタン</button>

丸ボタン<button type="button" class="btn btn-primary rounded-circle p-0" style="width:2rem;height:2rem;">＋</button>

長丸ボタン<button type="button" class="btn btn-primary rounded-pill">長丸ボタン</button>

v3ボタン<button type="button" class="btn btn-default-v3">v3ボタン</button>

v3ボタンのscss/css.btn-default-v3 {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-body-bg-rgb);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-gray-200);
  --bs-btn-hover-border-color: var(--bs-border-color);
  --bs-btn-focus-shadow-rgb: var(--bs-link-color-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-gray-200);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
}

テキストの折り返しを無効にする（Disable text wrapping）

ボタンのテキストが折り返されたくない場合は、ボタン（.btn）に .text-nowrap クラスを追加する。Sass上でボタンのテキストの折り返しを無効にするには、scss/_variables.scss で $btn-white-space: nowrap と設定する（デフォルトでは $btn-white-space: null に設定）。

ボタンタグ（Button tags）

.btn クラスは、<button> 要素で使用するように設計されているが、<a> や <input> 要素でこれらのクラスの使用もできる（ブラウザによっては若干異なるレンダリングが適用される可能性あり）。

現在のページ内の新しいページやセクションにリンクするのではなく、ページ内の機能（例えばコンテンツの折り畳みなど）を起動する <a> 要素のボタンクラスを使用する場合は、その目的をスクリーンリーダーなどの支援技術に伝えるため、これらのリンクに適切に role="button" を付ける必要がある。

見本

設定例

アンカーリンク<a>に設定<a class="btn btn-primary" href="#" role="button">リンク</a>

ボタンタグ<button>に設定<button type="submit" class="btn btn-primary">ボタン</button>

インプットボタンに設定<input type="button" class="btn btn-primary" value="入力する">
<input type="submit" class="btn btn-primary" value="登録する">
<input type="reset" class="btn btn-primary" value="リセット">

アウトラインボタン（Outline buttons）

豊かな背景色をもたらすボタンが必要なら、デフォルトの修飾子クラスを .btn-outline-* に置き換えて、ボタンの色を背景画像や色にする。
※背景色の設定がないボタン。背景画像がある場合でも邪魔になりにくい。

ボタンの種類

設定例

<button type="button" class="btn btn-outline-primary">...</button>

背景色と併用<button type="button" class="btn btn-outline-primary bg-warning">...</button>

ボタンのサイズ（Sizes）v5.2.0設定追加

大きめか小さめのボタンにしたいなら、追加サイズとして .btn-lg か .btn-sm を追加。

サイズの種類

設定例

大きめのボタン<button type="button" class="btn btn-primary btn-lg">大きめ</button>
<button type="button" class="btn btn-secondary btn-lg">大きめ</button>

小さめのボタン<button type="button" class="btn btn-primary btn-sm">小さめ</button>
<button type="button" class="btn btn-secondary btn-sm">小さめ</button>

CSS変数を使用した独自のカスタムサイズにもできる。v5.2.0追加

見本

設定例

<button type="button" class="btn btn-primary" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">カスタムボタン</button>

ボタンの無効化（Disabled state）v5.1.1設定変更

disabled 属性を <button> 要素に追加することによって、ボタンを非アクティブに見えるようにする。無効化されたボタンには pointer-events: none が適用され、hoverやactive状態に切り替わらなくなる。

1. <button> タグで設定

見本

設定例

<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
<button type="button" class="btn btn-secondary" disabled>無効ボタン</button>
<button type="button" class="btn btn-outline-primary" disabled>無効ボタン</button>
<button type="button" class="btn btn-outline-secondary" disabled>無効ボタン</button>

2. <a> タグで設定 v5.1.1設定変更

<a> 要素で使用する無効化ボタンは、少し違った動作をする：

• <a> は disabled 属性をサポートしていないため、.disabled クラスを追加して視覚的に無効に見えるようにする必要がある
• アンカーボタンのすべての pointer-events を無効にするために、将来的に使いやすいスタイルが含まれている。
• <a> を使用する無効化ボタンには、支援技術に対する要素の状態を示すために、aria-disabled="true" 属性を含める必要がある。
• <a> を使用する無効化ボタンには、href 属性を含めるべきではない。

見本

Bootstrap5.1.1～の設定例

<a class="btn btn-primary disabled" role="button" aria-disabled="true">無効ボタン</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">無効ボタン</a>

※Bootstrap5.1.0の設定例 赤背景が変更箇所

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>

リンク機能の警告 v5.1.1注意書きから更新

無効化されたリンクで href 属性を保持する必要がある場合をカバーするために、.disabled クラスは pointer-events: none を使用して <a> のリンク機能を無効にしようとする。このCSSプロパティはまだHTMLに対して標準化されていないが、最近のすべてのブラウザがサポートしているので注意。さらに pointer-events: none をサポートするブラウザであっても、キーボードナビゲーションは影響を受けない。つまりこれは晴眼者キーボードユーザーと支援技術ユーザーが引き続きこれらのリンクをアクティブにできることを意味する。従って安全のために、aria-disabled="true" に加えて、これらのリンクに tabindex="-1" 属性を含めて、それらがキーボードフォーカスを受け取らないようにし、カスタムJavaScriptを使用してそれらの機能を完全に無効にする。

見本

設定例

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>

ブロックボタン（Block buttons）v5.3.1設定変更

1.常にブロックボタン

表示ユーティリティとギャップユーティリティを組み合わせて、Bootstrap4のような縦積みレスポンシブの全幅"ブロックボタン"を作成。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

ボタンが2つの場合<div class="d-grid gap-2">
  <button type="button" class="btn btn-primary">ボタン</button>
  <button type="button" class="btn btn-primary">ボタン</button>
</div>

ボタンが1つの場合<button type="button" class="btn btn-primary w-100">ボタン</button>

<a> タグを使用<div class="d-grid gap-2">
  <a href="#" class="btn btn-primary w-100" role="button">ボタン</a>
  <a href="#" class="btn btn-primary w-100" role="button">ボタン</a>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

ボタンが2つの場合<button type="button" class="btn btn-primary btn-block">ボタン</button>
<button type="button" class="btn btn-primary btn-block">ボタン</button>

ボタンが1つの場合<button type="button" class="btn btn-primary btn-block">ボタン</button>

<a> タグを使用<a href="#" class="btn btn-primary btn-block mb-1" role="button">ボタン</a>
<a href="#" class="btn btn-primary btn-block" role="button">ボタン</a>

2.モバイルではブロックボタン

ここでは、垂直に積み重ねられたボタンから、md ブレークポイントで .d-md-block が .d-grid クラスを置き換え、gap-2 ユーティリティを無効にするレスポンシブバリエーションを作成。ブラウザのサイズを変更して、その変更をご確認下さい。

見本

Bootstrap5.xの設定例 緑背景が変更箇所

<button> タグを使用<div class="d-grid gap-2 d-md-block">
  <button type="button" class="btn btn-primary">ボタン</button>
  <button type="button" class="btn btn-primary">ボタン</button>
</div>

<a> タグを使用<div class="d-flex flex-column flex-md-row gap-2">
  <a href="#" class="btn btn-primary" role="button">ボタン</a>
  <a href="#" class="btn btn-primary" role="button">ボタン</a>
</div>

※Bootstrap4.xの設定例 赤背景が変更箇所

<button> タグを使用<div class="d-flex flex-column flex-md-row">
  <button type="button" class="btn btn-primary flex-fill flex-md-grow-0">ボタン</button>
  <button type="button" class="btn btn-primary flex-fill flex-md-grow-0 ml-md-1 mt-1 mt-md-0">ボタン</button>
</div>

<a> タグを使用<a href="#" class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0" role="button">ボタン</a>
<a href="#" class="btn btn-primary d-block d-md-inline-block mb-2 mb-md-0" role="button">ボタン</a>

3.半分の幅のブロックボタン

グリッド列幅クラスを使用してブロックボタンの幅を調整。例えば、半分の幅の"ブロックボタン"にする場合は、.col-6 を使用。.mx-auto で水平方向で中央揃えにもする。

見本

設定例

<div class="d-grid gap-2 col-6 mx-auto">
  <button type="button" class="btn btn-primary">ボタン</button>
  <button type="button" class="btn btn-primary">ボタン</button>
</div>

4.積み重ならない場合は行末揃え

追加のユーティリティを使用して、水平の場合のボタンの配置を調整。ここでは、2.のレスポンシブの例を取り上げ、ボタンにいくつかのFlexユーティリティとマージンユーティリティを追加して、ボタンが積み重ならないときはボタンを行末揃えにする。

見本

設定例

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button type="button" class="btn btn-primary me-md-2">ボタン</button>
  <button type="button" class="btn btn-primary">ボタン</button>
</div>

※積み重ねヘルパーを使用した設定もできる。

ボタンプラグイン（Button plugin）

ボタンプラグインを使用すると、簡単なオン/オフの切替ボタンが作成できる。

切替ボタン（Toggle states）v5.3.1設定変更

ボタンをプッシュ状態に切り替えるには、data-bs-toggle="button" を追加。ボタンをあらかじめプッシュ状態に切り替えておく場合は、手動で .active クラスと aria-pressed="true" を <button> に追加する必要がある。

1. button.btn を使用

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

基本クラスボタンの場合<p class="d-inline-flex gap-1">
  <button type="button" class="btn" data-bs-toggle="button">通常の状態</button>
  <button type="button" class="btn active" data-bs-toggle="button" aria-pressed="true">アクティブ状態</button>
  <button type="button" class="btn" disabled data-bs-toggle="button">無効な状態</button>
</p>

Primaryボタンの場合<p class="d-inline-flex gap-1">
  <button type="button" class="btn btn-primary" data-bs-toggle="button">通常の状態</button>
  <button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">アクティブ状態</button>
  <button type="button" class="btn btn-primary" data-bs-toggle="button" disabled>無効な状態</button>
</p>

2. a.btn を使用 v5.1.1設定変更

見本

Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所

基本クラスボタンの場合<p class="d-inline-flex gap-1">
  <a href="#" class="btn" role="button" data-bs-toggle="button">通常の状態</a>
  <a href="#" class="btn active" role="button" data-bs-toggle="button" aria-pressed="true">アクティブ状態</a>
  <a class="btn disabled" aria-disabled="true" role="button" data-bs-toggle="button">無効な状態</a>
</p>

Primaryボタンの場合<p class="d-inline-flex gap-1">
  <a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">通常の状態</a>
  <a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">アクティブ状態</a>
  <a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">無効な状態</a>
</p>

メソッド（Methods）v5.0.2メソッド追加、v5.2.0JavaScript変更

ボタンコンストラクタを使用してボタンインスタンスを作成できる。以下に例を表示：

Bootstrap5.2.0～の設定例 緑背景が5.2.0での変更箇所

JavaScriptconst bsButton = new bootstrap.Button('#myButton')

※Bootstrap5.1.xの設定例 赤背景が5.2.0での変更箇所

JavaScriptvar button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)

例えば、すべてのボタンを切り替えるには：

JavaScriptdocument.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

CSS v5.0.0-beta3追加、v5.2.0Sassから名称変更

CSS変数（Variables）v5.2.0設定移行

Bootstrapの進化するCSS変数アプローチの一環として、ボタンは、リアルタイムのカスタマイズを強化するために、.button でローカルCSS変数を使用するようにした。CSS変数の値はSassを経由して設定されるため、Sassのカスタマイズも引き続きサポートされる。

デフォルトの設定

scss/_buttons.scss 内 btn-css-vars の設定--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

各 .btn-* 修飾子クラスは適切なCSS変数を更新して、button-variant(), button-outline-variant(), button-size() ミックスインを使用して追加のCSSルールを最小限に抑える。

以下は、BootstrapのCSS変数を独自のCSS変数とSass変数の混合で再割り当てすることで、解説の固有のボタンと同様なカスタム .btn-* 修飾クラスを構築する例。

見本

設定例

HTML<button type="button" class="btn btn-bd-primary">カスタムボタン</button>

custom.scss.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

--bd-violetの作成用scss$bd-purple:        #4c0bce;
$bd-violet:        lighten(saturate($bd-purple, 5%), 15%);

:root,
[data-bs-theme="light"] {
  --bd-violet: #{$bd-violet};
  --bd-violet-rgb: #{to-rgb($bd-violet)};
  --bd-violet-bg: var(--bd-violet);
}

@include color-mode(dark, true) {
  --bd-violet: #{mix($bd-violet, $white, 75%)};
  --bd-violet-bg: #{$bd-violet};
}

Sass変数（Sass variables）v5.2.0変数から名称変更

デフォルトの設定

scss/_variables.scss 内 btn-variables の設定$btn-color:                   var(--#{$prefix}body-color);
$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // テキストの折り返しを防ぐには、`nowrap`に設定

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;
$btn-link-focus-shadow-rgb:   to-rgb(mix(color-contrast($link-color), $link-color, 15%));

// グローバルな境界の角丸とは別にボタンの角丸をカスタマイズ
$btn-border-radius:           var(--#{$prefix}border-radius);
$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm);
$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg);

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

Sassミックスイン（Sass mixins）v5.2.0mixinから名称変更

ボタンには、通常のボタンとアウトラインボタンのバリエーションミックスイン（どちらも $theme-colors に基づく）とボタンサイズのミックスインの3つのミックスインがある。

デフォルトの設定

scss/mixins/_buttons.scss 内 btn-variant-mixin の設定@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

scss/mixins/_buttons.scss 内 btn-outline-variant-mixin の設定@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}gradient: none;
}

scss/mixins/_buttons.scss 内 btn-size-mixin の設定@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sassループ（Sass loops)v5.2.0ループから名称変更

ボタンバリエーション（通常のボタンとアウトラインボタン用）は、それぞれのミックスインを $theme-colors マップで使用して、scss/_buttons.scss に修飾子クラスを生成。

デフォルトの設定

scss/_buttons.scss 内 btn-variant-loops の設定@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}