Bootstrap4 Button(ボタン)の使い方を徹底解説

Bootstrap4で利用できるボタンクラスの使い方をご紹介します。
Bootstrap4 button

Bootstrap3→4に変わってからの主な変更点

Bootstrap3→4になり、廃止・変更されたクラスがいくつかありますので注意して利用しましょう。

  • button-outline-{color}が登場した
  • button-blockが登場した
  • button-{color}の種類が増えた

ボタンbuttonクラスの基本的な使い方

ボタンクラスはa要素、button要素、input要素で利用できます。対象要素に対してclass=”btn btn-xxxxx”という形式で指定します。

クラス 意味
.btn ボタンを定義(必須)
.btn-primary 青色のボタン
.btn-secondary 灰色のボタン
.btn-success 緑色のボタン
.btn-info 水色のボタン
.btn-warning 黄色のボタン
.btn-danger 赤色のボタン

■表示例
Bootstrap4 button
■上記のソースコード

  <h2>ボタン</h2>
  <a href="#" class="btn btn-primary" role="button">btn-primary</a>
  <a href="#" class="btn btn-secondary" role="button">btn-secondary</a>
  <a href="#" class="btn btn-success" role="button">btn-success</a>
  <a href="#" class="btn btn-info" role="button">btn-info</a>
  <a href="#" class="btn btn-warning" role="button">btn-warning</a>
  <a href="#" class="btn btn-danger" role="button">btn-danger</a>
  <a href="#" class="btn btn-light" role="button">btn-light</a>
  <a href="#" class="btn btn-dark" role="button">btn-dark</a>

role=”button”ってなんでしょうか?必要なんですか?

a要素でボタンクラスを利用する際には、role=”button”を追加することが推奨されています。(button要素やinput要素では不要です。)
見た目はほとんど変わらないので、つけなくても通常問題ありませんが、スクリーンリーダーなどでWebページを読む際に利用するそうです。

When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role=”button” to appropriately convey their purpose to assistive technologies such as screen readers.

Buttons | Bootstrap 4.3より引用

btn-{サイズ} ボタンの大きさ

btn-{サイズ}でボタンの大きさを設定することができます。

クラス 意味
.btn-lg 大きいボタン
.btn-sm 小さいボタン
.btn-block ブロックレベルにする(width100%になる)

■ボタンの大きさ(大きいボタンbtn-lgと小さいボタンbtn-sm)
Bootstrap ボタンの大きさ
■上記のソースコード

  <h2>ボタンの大きさ</h2>
  <a href="#" class="btn btn-info btn-sm" role="button">btn-sm</a>
  <a href="#" class="btn btn-info" role="button">btn(通常)</a>
  <a href="#" class="btn btn-info btn-lg" role="button">btn-lg</a>

また、btn-blockクラスを利用するとボタンをブロックレベル要素(width:100%)にすることができます。btn-blockはbtn-smやbtn-lgと組み合わせることができます。

■表示例
Bootstrap4 btn-block
■上記のソースコード

  <h2>ボタンの大きさ</h2>
  <a href="#" class="btn btn-info btn-block btn-sm" role="button">btn-block + btn-sm</a>
  <a href="#" class="btn btn-info btn-block" role="button">btn-block(通常)</a>
  <a href="#" class="btn btn-info btn-block btn-lg" role="button">btn-lg + btn-lg</a>

背景透明のボタン btn-outline-{color}

クラス 意味
.btn ボタンを定義(必須)
.btn-outline-default 灰色のボタン
.btn-outline-primary 青色のボタン
.btn-outline-success 緑色のボタン
.btn-outline-info 水色のボタン
.btn-outline-warning 黄色のボタン
.btn-outline-danger 赤色のボタン

■表示例

■上記のソースコード

  <h2>ボタン</h2>
  <a href="#" class="btn btn-outline-primary" role="button">btn-primary</a>
  <a href="#" class="btn btn-outline-secondary" role="button">btn-secondary</a>
  <a href="#" class="btn btn-outline-success" role="button">btn-success</a>
  <a href="#" class="btn btn-outline-info" role="button">btn-info</a>
  <a href="#" class="btn btn-outline-warning" role="button">btn-warning</a>
  <a href="#" class="btn btn-outline-danger" role="button">btn-danger</a>
  <a href="#" class="btn btn-outline-light" role="button">btn-light</a>
  <a href="#" class="btn btn-outline-dark" role="button">btn-dark</a>
  <br><br><br>
  <h2>ボタンの大きさ</h2>
  <a href="#" class="btn btn-outline-info btn-block btn-sm" role="button">btn-block + btn-sm</a>
  <a href="#" class="btn btn-outline-info btn-block" role="button">btn-block(通常)</a>
  <a href="#" class="btn btn-outline-info btn-block btn-lg" role="button">btn-lg + btn-lg</a>

まとめ

いかがでしたでしょうか。
今回は、グリッドシステム・レスポンシブデザインで有名なCSSフレームワークBootstrap(ブートストラップ)4のボタン(Button)の使い方の基本をご紹介しました。
使用頻度が低いためここでは割愛しましたが、ほかにもいくつかの使い方があります。公式サイトにも使い方の詳細が掲載されていますので、参考にしながら活用してみてください。
Buttons | Bootstrap4.3

今回は、以上になります。最後までご覧いただきありがとうございました。