Bootstrapでボタンを横並びにグループ化する方法を解説！
Bootstrapでは、ボタンをグループ化して横並びにするなどの配置も簡単に調整することができます。今回はBootstrapを使ってボタンを横並びで表示する方法を数パターンに分けて、サンプルコード付きで紹介していきます。
Bootstrapでボタンを横並びにグループ化する方法
Bootstrapでボタンを横並びにグループ化するには、btn-groupというクラスを使用します。このクラスでグループにしたいボタンを囲むと、囲んだボタンが横にくっついて表示されます。
ちなみに、btn-groupの代わりにbtn-group-verticalというクラスを使用すると、縦並びでグループ化できます。
横並びにしたボタンを更にまとめる
btn-toolbarというクラスを使うと、複数のボタングループをツールバーとしてまとめて表示することができます。
Bootstrap4においてボタングループ間の間隔を開けたい場合は、mr-○やml-○(○は数字)を用いて自分で指定する必要があります。
一つのbtn-toolbarの中にあるボタン要素は横並びで表示されます。
複数個btn-toolbarを作成した場合は、次の行に表示されます。
Bootstrapでボタンを横並びにグループ化して中央寄せする方法
上記の方法でグループ化したボタンを横並びにして中央寄せにしたい場合は、flexboxを使うのがおすすめです。
<div class="container mt-4">
<div class="row justify-content-center">
<div class="btn-group">
<button class="btn btn-primary">ボタン１</button>
<button class="btn btn-primary">ボタン２</button>
</div>
</div>
</div>flaxboxのrowの中にボタンを入れ、rowのdiv要素のクラスとしてjustify-content-centerを適用させます。
更にここで注意なのが、rowを指定したdiv要素の内側に更にもう一つdiv要素を作り、btn-groupを適用させ、その中にボタンを入れる必要があることです。下の例を見てもらうとわかりますが、btn-groupとjustify-content-centerを同じdiv要素に適用させると、レイアウトがうまく適用されません。rowの中にbtn-groupを作る、というイメージで作成するといいでしょう。
ちなみに、ｊustify-content-〇〇のようなrow全体のレイアウトを指定するクラスは他にも色々あります。以下の公式サイトで確認できるので、興味のある人は見てみてください。
まとめ
いかがでしたか？「ボタンを横並びにする」といっても様々なレイアウトがあるので、分けて紹介させていただきました。
作成したいページの特性や好みのレイアウトに合わせて、使い分けてみてください。
