Bootstrapボタンの使い方
種類・サイズ・カスタマイズまとめ
Bootstrapのボタンは、クラスを付けるだけで色・サイズ・状態を簡単に切り替えられます。
この記事では、よく使うボタンのバリエーションとカスタマイズ方法を解説します。
こんな人向けの記事です
- Bootstrapのボタンの種類を知りたい
- ボタンのサイズや色を変えたい
- ボタングループやアウトラインボタンを使いたい
Step 1基本のボタン
btn に色のクラスを組み合わせて使います。
Primary
Secondary
Success
Danger
Warning
Info
HTML
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>| クラス | 色 | 用途 |
|---|---|---|
btn-primary | 青 | 主要なアクション |
btn-secondary | グレー | 補助的なアクション |
btn-success | 緑 | 成功・完了 |
btn-danger | 赤 | 削除・警告 |
btn-warning | 黄 | 注意 |
btn-info | 水色 | 情報 |
btn-light | 白 | 軽いアクション |
btn-dark | 黒 | ダークテーマ |
a タグでもボタンにできる
<a href="#" class="btn btn-primary">リンクボタン</a>btn クラスは <button> だけでなく <a> や <input> にも使えます。
Step 2アウトラインボタン
背景色なしで枠線だけのボタンを作れます。
Primary
Success
Danger
HTML
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-success">Success</button>
<button class="btn btn-outline-danger">Danger</button>Step 3ボタンのサイズ
大きいボタン
通常のボタン
小さいボタン
HTML
<button class="btn btn-primary btn-lg">大きいボタン</button>
<button class="btn btn-primary">通常のボタン</button>
<button class="btn btn-primary btn-sm">小さいボタン</button>Step 4ボタンの状態（無効化・ローディング）
HTML
<!-- 無効化（クリック不可） -->
<button class="btn btn-primary" disabled>無効なボタン</button>
<!-- 幅いっぱいのボタン -->
<button class="btn btn-primary w-100">送信</button>
<!-- ローディング中のボタン -->
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
処理中...
</button>Step 5ボタングループ
複数のボタンをひとまとめにして表示できます。
左
中
右
HTML
<div class="btn-group">
<button class="btn btn-primary">左</button>
<button class="btn btn-primary">中</button>
<button class="btn btn-primary">右</button>
</div>まとめ
btn+btn-{色}で基本のカラーボタンbtn-outline-{色}でアウトラインボタンbtn-lg/btn-smでサイズ変更disabledで無効化、w-100で全幅btn-groupでボタンをまとめて表示