Bootstrapでボタンを右寄せする方法を解説！

Bootstrapでは見た目の整ったボタンを簡単に作成するクラスが用意されています。
この記事では、作成したボタンを右寄せにする方法について紹介します。

フォームのsubmitボタン（送信ボタン）などを作成する際によく見るレイアウトです。

ボタンを右寄せする際にはbutton要素にクラスを指定するだけでなく、新たにdiv要素を追加する必要があります。

まずはボタン単体を右寄せする方法を紹介します。

button要素をdiv要素で囲み、div要素には.text-rightを適用します。
すると、以下のようにボタンが右寄せになります。

複数のボタンを右寄せしたい場合も、同様に.text-rightの適用されたdiv要素を使うことができます。

ただし、ボタン同士の隙間を埋めたり、ボタンを左右に分けて表示したい場合にはボタングループやボタンツールバーが便利です。

複数のボタンをまとめて（つなげて）表示したい場合にボタングループを用います。

また、ボタングループを更にまとめたい場合にボタンツールバーを用います。

このように、複数のbutton要素を.btn-groupが適用されたdiv要素で囲み、それを更に.btn-toolbarの適用されたdiv要素で囲みます。

ここで、.btn-groupが適用されたdiv要素に.ml-autoを適用すると、ボタンが右寄せになります。（.ml-autoを適用すると、左方向のマージンが最大になり、結果右寄せになります。）

最後に、今回紹介したクラスや、それに関連したクラスを用いて作成できる他のレイアウトを紹介します。

ボタンツールバー内に複数のボタングループを配置し、.ml-autoや.mr-autoを適用すれば左右に別れたボタン群を作成することも可能です。

先程のボタングループとボタンツールバーの例で、.ml-autoではなく.mx-autoを適用することで中央に配置することができます。（.mx-autoは左右のマージンをそれぞれ最大にするクラスです。）

また、.text-rightを使用した例で.text-centerを代わりに適用することでも、中央寄せにできます。