Bootstrap 4 ボタン関係の装飾クラスまとめ

Bootstrap4のボタン関係のクラスをまとめました。
カラーの一覧やサイズのバリエーション、形状などを一瞥できるようにしています。

ボタンの見た目にする

ボタンの見た目にするには btn クラスを指定します。
btn クラスを適用できるタグは３種類です。

<button>タグ
<a>タグ
<input>タグ

コード

<button type="button" class="btn btn-primary">&lt;button&gt;タグにあてた</button>
<a class="btn btn-primary" href="#" role="button">&lt;a&gt;タグにあてた</a>
<input type="button" class="btn btn-primary" value="&lt;input&gt;タグにあてた">

ボタンの色

背景色

ボタンに背景色を指定するには btn クラスに加えて btn-(色) クラスを指定します。

コード

<button>クラス指定なし</button>
<button type="button" class="btn">btnクラスのみ</button>
<button type="button" class="btn btn-primary mt-1">btn-primary</button>
<button type="button" class="btn btn-secondary mt-1">btn-secondary</button>
<button type="button" class="btn btn-success mt-1">btn-success</button>
<button type="button" class="btn btn-info mt-1">btn-info</button>
<button type="button" class="btn btn-warning mt-1">btn-warning</button>
<button type="button" class="btn btn-danger mt-1">btn-danger</button>
<button type="button" class="btn btn-dark mt-1">btn-dark</button>
<button type="button" class="btn btn-light mt-1">btn-light</button>
<button type="button" class="btn btn-link mt-1">btn-link</button>

btn-link

btn-linkクラスは文字だけでありボタンっぽくない見た目をしていますが、btnクラスの一つです。
大きさ変更クラスのbtn-lg, btn-sm、枠線のbtn-outline-○○で見た目を調節することも可能です。

枠線

背景の塗りつぶしではなく、枠線としてのボタン表示も用意されています。
枠線の指定は btn クラスに加えて btn-outline-(色) クラスを指定します。

コード

<button type="button" class="btn btn-outline-primary mt-1">btn-outline-primary</button>
<button type="button" class="btn btn-outline-secondary mt-1">btn-outline-secondary</button>
<button type="button" class="btn btn-outline-success mt-1">btn-outline-success</button>
<button type="button" class="btn btn-outline-info mt-1">btn-outline-info</button>
<button type="button" class="btn btn-outline-warning mt-1">btn-outline-warning</button>
<button type="button" class="btn btn-outline-danger mt-1">btn-outline-danger</button>
<button type="button" class="btn btn-outline-dark mt-1">btn-outline-dark</button>
<button type="button" class="btn btn-outline-light mt-1">btn-outline-light</button>

<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
背景色と枠線の両方を指定した場合、枠線の方が優先されます。

コード

<button type="button" class="btn btn-warning btn-outline-danger">btn-warning と btn-outline-danger</button>

outlineに背景色を指定する場合はbg-○○を使用します。

コード

<button type="button" class="btn bg-warning btn-outline-danger">bg-warning と btn-outline-danger</button>

ボタンの大きさ

ボタンの大きさは３種類です。

btn-lg（大）
指定なし（中）
btn-sm（小）

コード

<button type="button" class="btn btn-primary btn-lg">btn-lgサイズ</button>
<button type="button" class="btn btn-primary">大きさ指定なし</button>
<button type="button" class="btn btn-primary btn-sm">btn-smサイズ</button>

ボタンブロック

btn-blockクラスを適用することで、ボタンをブロック要素かつ、幅100％にします。
スマートフォンのレイアウト時に多用するクラスです。

コード

<button type="button" class="btn btn-primary btn-block">btn-block</button>
<button type="button" class="btn btn-primary btn-block btn-lg">btn-block btn-lg</button>
<button type="button" class="btn btn-primary btn-block btn-sm">btn-block btn-sm</button>

ボタンのアクティブ・非アクティブ

active, disabled クラスを指定することで、ボタンをアクティブっぽい見た目、非アクティブっぽい見た目にできます。
active クラスは濃い色に、disabled クラスは薄色になります。
btnクラスとセットで使用しないと機能しません。
disabledはbuttonタグの属性として記述しても同様の表示になります。（activeはクラスのみ）
disabledにすると、マウスカーソルを合わせてもpointerのままの表示になります。※通常は指(hand)カーソル。
active、disabledは表示だけで、ボタンとしての機能の有効・無効を制御できるものではありません。
JavaScriptでボタンを制御して、見た目を機能の状態と合わせる場合に使用します。

コード

<button type="button" class="btn btn-primary mt-1">何も適用なし</button>
<button type="button" class="btn btn-primary active ml-2 mt-1">activeクラス適用</button>
<button type="button" class="btn btn-primary disabled ml-2 mt-1">disabledクラス適用</button>
<button type="button" class="btn btn-primary ml-2 mt-1" disabled>disabled属性適用</button>

ボタングループ

複数のボタンを１つのグループのようにまとまった表示にできます。
ボタンを配置している親要素のクラスに btn-group を指定します。

コード

<div class="btn-group">
	<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>
</div>

これも見た目だけであって、ラジオボタンの機能があるわけではありません。
レイアウト上はひとつの大きな塊として扱われるため、フレキシブルレイアウトでウィンドウ幅に達した場合、この塊のまま移動して配置されることになります。
ボタングループだけでウィンドウ幅に達している場合、ボタンの折返しはありません。

ボタングループの大きさは３種類あります。
btn-group クラスに加えて、btn-group-(大きさ) クラスを指定して使用します。

指定なし（中）
btn-group-sm（小）
btn-group-lg（大）

コード

<div class="container-fluid">
<span>通常サイズ</span>
<div class="row">
	<div class="btn-group">
		<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>
	</div>
</div>
<span>btn-group-lg</span>
<div class="row mt-1">
	<div class="btn-group btn-group-lg">
		<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>
	</div>
</div>
<span>btn-group-sm</span>
<div class="row mt-1">
	<div class="btn-group btn-group-sm">
		<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>
	</div>
</div>
</div>

通常のボタンは btn-sm, btn-lg で大きさを変更できますが、ボタングループでも同様の指定が効きます。
その場合、ボタングループ内で大きさが混在した塊として表示されます。

コード

<div class="btn-group">
	<button type="button" class="btn btn-primary">Primary</button>
	<button type="button" class="btn btn-primary btn-sm">Primary</button>
	<button type="button" class="btn btn-primary btn-lg">Primary</button>
	<button type="button" class="btn btn-primary btn-sm">Primary</button>
</div>

縦型のグループにもできます。
その場合は btn-group ではなく btn-group-vertical クラスを指定します。

コード

<div class="btn-group-vertical">
	<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>
</div>

ボタンツールバー

複数のボタングループを、ツールバーとしてさらにグループ化できます。
btn-group クラスを適用しているdivの親divに対して btn-toolbar クラスを指定します。

コード

<div class="btn-toolbar">
	<div class="btn-group mr-2">
		<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>
	</div>
	<div class="btn-group mr-2">
		<button type="button" type="button" class="btn btn-info">Info</button>
		<button type="button" type="button" class="btn btn-warning">Warning</button>
	</div>
	<div class="btn-group">
		<button type="button" type="button" class="btn btn-danger">Danger</button>
	</div>
</div>