Bootstrapでボタンを横並びにするには？
Bootstrapを使ってWebサイトを構築する際、ボタンを横並びに配置したい場合があります。例えば、フォームの送信ボタンとリセットボタンを並べたり、複数の選択肢をボタンで表現する場合などです。 この記事では、Bootstrapを使って簡単にボタンを横並びにする方法について解説します。
class名に"btn-group"と"d-flex"を指定する
Bootstrap 4 以降では、フレックスボックスを利用して要素を横並びに配置するのが一般的です。ボタンを横並びにするには、以下の手順に従います。
- ボタンをまとめる親要素にクラス名
btn-groupとd-flexを指定します。 - 各ボタンにはクラス名
btnを指定します。
<div class="btn-group d-flex">
<button type="button" class="btn btn-primary">ボタン1</button>
<button type="button" class="btn btn-secondary">ボタン2</button>
<button type="button" class="btn btn-success">ボタン3</button>
</div>
上記コードを実行すると、3つのボタンが横並びに配置されます。btn-groupクラスは、ボタンをグループ化し、適切な余白を自動的に設定します。d-flexクラスは、フレックスボックスを適用し、要素を横並びにします。
ボタンのスタイルを変更する
Bootstrapには、ボタンの色やサイズを変更するためのクラスが用意されています。以下の表は、よく使用されるボタンのスタイルとクラス名の一覧です。
| スタイル | クラス名 |
|---|---|
| プライマリ | btn-primary |
| セカンダリ | btn-secondary |
| サクセス | btn-success |
| 危険 | btn-danger |
| 警告 | btn-warning |
| 情報 | btn-info |
| ライト | btn-light |
| ダーク | btn-dark |
| 小 | btn-sm |
| 大 | btn-lg |
これらのクラスをbtnクラスと一緒に指定することで、ボタンのスタイルを変更することができます。
参考資料
よくある質問
Q1: ボタンの間隔を調整するにはどうすればいいですか？
A1: btn-groupクラスの代わりに、mr-*クラス(margin-right)を各ボタンに指定することで、ボタン間の右側の余白を調整できます。例えば、mr-2を指定すると、右側に5pxの余白が設定されます。
Q2: ボタンを縦並びにするにはどうすればいいですか？
A2: d-flexクラスの代わりに、d-blockクラスを各ボタンに指定することで、ボタンを縦並びに配置できます。
Q3: Bootstrap 3 でボタンを横並びにするにはどうすればいいですか？
A3: Bootstrap 3 では、btn-groupクラスを指定するだけで、ボタンが自動的に横並びになります。フレックスボックスは必要ありません。
その他の参考記事:bootstrap 右寄せ ボタン