メインコンテンツへスキップ

ボタン(Buttons)

フォーム、ダイアログなどのアクションには、Bootstrapのカスタムボタンスタイルを使用。文脈的なバリエーション、サイズ、状態などにも対応済み。

目次

ボタンの設定(Examples)

Bootstrapには、いくつかの定義済みのボタンスタイルがあり、それぞれ独自の意味的目的を果たす。

ボタンの種類

 .btn-primary

 .btn-secondary

 .btn-info

 .btn-success

 .btn-warning

 .btn-danger

 .btn-light

 .btn-dark

 .btn-link

●裏技

 .btn-{themecolor}.rounded-0

 丸ボタン(1文字用):.btn-{themecolor}.rounded-circle.p-0

 .btn-{themecolor}.rounded-pill
設定例
通常のボタン<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>
【設定】
  • <button>.btn.btn-{themecolor}.btn-{themecolor} は上記「ボタンの種類」から選択)を入れる(.btn 単独での使用は不可)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark, link のいずれかを選択
  • ※裏技で .btn.btn-{themecolor}.rounded-0 を追加すると角ボタン、.rounded-circle.p-0 を追加すると丸ボタン(幅と高さの指定も必要)、.rounded-pill を追加すると長丸ボタンになる

 

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

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

 

ボタンタグ(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="リセット">
【設定】
  • <button> だけでなく、<a>, <input[type="button"]>, <input[type="button"]>, <input[type="submit"]>, <input[type="reset"]> のいずれかに .btn.btn-{themecolor} を入れる
アクセシビリティの設定】
  • <a> で使用する際には、role="button"属性(支援技術にボタンの役割を伝える)を入れる

 

アウトラインボタン(Outline buttons)

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

ボタンの種類

 .btn-outline-primary

 .btn-outline-secondary

 .btn-outline-info

 .btn-outline-success

 .btn-outline-warning

 .btn-outline-danger

 .btn-outline-light ※色が見やすいように背景色と空白をつけています

 .btn-outline-dark

●裏技

 .btn-outline-{themecolor}.bg-{themecolor}
設定例
<button type="button" class="btn btn-outline-primary">...</button>
背景色と併用<button type="button" class="btn btn-outline-primary bg-warning">...</button>
【設定】
  • .btn.btn-outline-{themecolor}.btn-outline-{themecolor} は上記の「ボタンの種類」から選択)
    • {themecolor} は、primary, secondary, success, info, warning, danger, light, dark のいずれかを選択
【注意】
  • 背景色を合わせて設定する場合は、.btn-{themecolor} ではなく、.bg-{themecolor} を使用すること(.bg-{themecolor} は「背景色の種類」から選択)

 

ボタンのサイズ(Sizes)

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

サイズの種類

 .btn-lg

 .btn-sm

(参考)
設定例
大きめのボタン<button type="button" class="btn btn-primary btn-lg">大きめ</button>
<button type="button" class="btn btn-outline-secondary btn-lg">大きめ</button>
小さめのボタン<button type="button" class="btn btn-primary btn-sm">小さめ</button>
<button type="button" class="btn btn-outline-secondary btn-sm">小さめ</button>
【設定】
  • .btn.btn-{themecolor}(または .btn.btn-outline-{themecolor})に .btn-{size}(上記の「サイズの種類」から選択)を追加

 

ボタンの無効化(Disabled state)

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

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

1. <button> タグで設定

見本
設定例
<button type="button" class="btn btn-primary" disabled>無効ボタン</button>
<button type="button" class="btn btn-outline-secondary" disabled>無効ボタン</button>
【設定】
  • ボタンの設定に disabled 属性を入れる

2. <a> タグで設定

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

見本
設定例
<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>
<a href="#" class="btn btn-outline-secondary disabled" tabindex="-1" role="button" aria-disabled="true">無効ボタン</a>
【設定】
  • <a> タグでは disabled 属性の設定ができないので .disabled を入れる
アクセシビリティの設定】
  • .disabledと同じ要素に、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)と aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)を入れる

 

ブロックボタン(Block buttons)v5.0.0-alpha3設定変更

1.常にブロックボタン

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

見本

●ボタンが2つの場合

●ボタンが1つの場合

<a> タグの場合

ボタン ボタン
Bootstrap5.xの設定例 緑背景が変更箇所
ボタンが2つの場合<div class="d-grid gap-2">
	<button class="btn btn-primary" type="button">ボタン</button>
	<button class="btn btn-primary" type="button">ボタン</button>
</div>
ボタンが1つの場合<button class="btn btn-primary w-100" type="button">ボタン</button>
<a> タグを使用<a href="#" class="btn btn-primary w-100 mb-1" role="button">ボタン</a>
<a href="#" class="btn btn-primary w-100" role="button">ボタン</a>
※Bootstrap4.xの設定例 赤背景が変更箇所
ボタンが2つの場合<button class="btn btn-primary btn-block" type="button">ボタン</button>
<button class="btn btn-primary btn-block" type="button">ボタン</button>
ボタンが1つの場合<button class="btn btn-primary btn-block" type="button">ボタン</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 ユーティリティを無効にするレスポンシブバリエーションを作成。ブラウザのサイズを変更して、その変更を確認すること。

見本

<button> タグを使用

<a> タグを使用 v5.0.0-beta2設定変更

Bootstrap5.xの設定例 緑背景が変更箇所
<button> タグを使用<div class="d-grid gap-2 d-md-block">
	<button class="btn btn-primary" type="button">ボタン</button>
	<button class="btn btn-primary" type="button">ボタン</button>
</div>
<a> タグを使用<div class="d-grid gap-2 d-flex flex-column d-md-inline-flex flex-md-row">
	<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 class="btn btn-primary flex-fill flex-md-grow-0" type="button">ボタン</button>
  <button class="btn btn-primary flex-fill flex-md-grow-0 ml-md-1 mt-1 mt-md-0" type="button">ボタン</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 class="btn btn-primary" type="button">ボタン</button>
	<button class="btn btn-primary" type="button">ボタン</button>
</div>

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

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

見本
設定例
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
	<button class="btn btn-primary me-md-2" type="button">ボタン</button>
	<button class="btn btn-primary" type="button">ボタン</button>
</div>
【設定】
  • ボタンを div.d-grid.gap-{size} で囲む(ボタンごとにグリッド表示になる)
  • モバイルではブロックボタン(<button> タグの場合):div.d-grid.gap-{size}.d-md-block を追加(md 以上で全体が横並び表示になる)
  • モバイルではブロックボタン(<a> タグの場合):div.d-grid.gap-{size}.d-flex.flex-column.d-md-inline-flex.flex-md-row で囲む(md 以上で全体が横並び表示になる)
  • div.d-grid.gap-{size}.col-{size} を追加すれば、幅の調整が可能
  • div.d-grid.gap-{size}.d-md-flex.justify-content-md-end を追加すれば、md 以上で全体が行末揃えされる
【変更履歴】
  • 【v5.0.0-alpha3】
    • ボタンが2つの場合:.btn.btn-{themecolor}.btn-blockdiv.d-grid.gap-{size} > .btn.btn-{themecolor}
    • ボタンが1つの場合や <a> タグの場合:.btn.btn-{themecolor}.btn-block.btn.btn-{themecolor}.w-100
    • .btn-block は廃止
  • 【v5.0.0-beta2】
    • モバイルのみブロック表示(<a> タグの場合):div.d-grid.gap-2.d-md-flex > <div> > .btn.btn-{themecolor}.w-100div.d-grid.gap-2.d-flex.flex-column.d-md-inline-flex.flex-md-row > .btn.btn-{themecolor}

 

ボタンプラグイン(Button plugin)

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

切替ボタン(Toggle states)v5.0.0-beta1設定変更

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

1. button.btn を使用

見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false">通常の状態</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">アクティブ状態</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">無効な状態</button>

2. a.btn を使用

見本
Bootstrap5.xの設定例 緑背景がv5.0.0-beta1での変更箇所
<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 href="#" class="btn btn-primary disabled tabindex="-1" aria-disabled="true"" role="button" data-bs-toggle="button">無効な状態</a>
【設定】
  • .btn.btn-{themecolor}(または .btn.btn-outline-{themecolor})に data-bs-toggle="button"aria-pressed="false"(支援技術にボタンが押されていない状態であることを伝える属性)を入れる
  • ボタンをあらかじめプッシュ状態に切り替えておく場合は、.btn.btn-{themecolor}(または .btn.btn-outline-{themecolor})に .active を追加し、data-bs-toggle="button"aria-pressed="true"(支援技術にボタンが押されている状態であることを伝える属性)を入れる
【変更履歴】
  • 【v5.0.0-beta1】
    • data- 属性に名前空間 bs- を追加
      • [data-toggle="button"][data-bs-toggle="button"]

メソッド(Methods)

メソッド 説明
toggle プッシュ状態を切り替える。ボタンをアクティブ化された外観にする。
dispose 要素のボタンを破棄(DOM要素に保存されているデータを削除)。

【変更履歴】