Bootstrapを利用すれば、簡単にボタンに様々なスタイルを付けることができます。それでは、いくつかボタンスタイルの使い方を見ていきます。使用しているBootstrapのバージョンはv4.0になります。

ボタンスタイルの付け方

ボタンを使うには、button要素に対してclassを付与させて使用します。

べた塗型のボタンを作る

背景色を付けたボタンを使う場合は「”btn btn-プロパティ名”」という形でclassを付けます。プロパティ名は以下のようなものが用意されています。

primary青地に白文字
secondaryグレー地に白文字
success緑地に白文字
danger赤地に白文字
warningオレンジ地に黒文字
info水色地に白文字
light白地に黒文字
dark黒地に白文字
link白地に青文字

実際にHTMLに記述した例が以下のようなスタイルになります。

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Bootstrapボタンスタイル例

アウトライン型のボタンを作る

白地に枠付きのボタンを作る場合は、「”btn btn-outline-プロパティ名”」という形でclassを付けることでスタイルを適用させることができます。プロパティ名は先程と同じ内容で、HTMLに記述した例が以下となります。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
Bootstrapアウトラインボタン例

ボタンのサイズを変える

これらのボタンには、いくつか違うサイズも用意されてます。「”btn-プロパティ名”」という形でclassを付与することでスタイルを適用することができます。ボタンサイズのプロパティは以下のようなものがあります。

lg大きいサイズ
sm小さいサイズ
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
Bootstrapサイズ違いのボタン例

このような感じでBootstrapには予めスタイルが用意されているので、classを付けるだけで簡単に作ることができます。

おすすめの記事