Bootstrapのボタン（btn）をカスタマイズする方法を解説！

Bootstrapでは、button要素に.btnのクラスを適用するとボタンのスタイルを指定できます。
このボタンの見た目や並び方などをカスタマイズする方法を紹介していきます！

ボタンの色を変えるには、.btn-{色}というクラスを適用します。

色の部分に指定する名前と色の組み合わせは以下のようになります。たとえば、.btn-primaryを適用すると一番左上の青色になります。

この他にも、ボタンをアウトラインだけにしたり、選択中の見た目にしたりなど、様々なデザインに調整できます。

詳しくは以下の記事で詳しく解説していますのであわせて参考にしてみて下さい。

ボタンにアイコンを付けるには、FontAwesomeを使用するのが一般的です。
FontAwesomeにはたくさんのデザインのアイコンが用意されています。

※Bootstrap3まではGlyphiconsといってBootstrapで使えるアイコンが用意されていましたが、Bootstrap4では使えなくなっています。

FontAwesomeを使うには、以下のコードを記述してスタイルシートを読み込みます。
その後、使いたいアイコンのコードを公式サイトからコピーして貼り付けることで、アイコンを使用できます。

詳しくは以下の記事で解説しています。アイコンの大きさを変える方法なども紹介しています。

ボタンを右寄せにするには、button要素をdiv要素で囲み、div要素には.text-rightを適用します。
すると、以下のようにボタンが右寄せになります。ボタンが複数ある場合でも同様の方法で右寄せにできます。

.text-rightの代わりに.text-centerを適用することで中央寄せにできます。

ボタンのレイアウトについては以下の記事で詳しく解説しています。

Bootstrapでボタンを横並びにグループ化するには、.btn-groupというクラスを使用します。このクラスでグループにしたいボタンを囲むと、囲んだボタンが横にくっついて表示されます。

詳しくは以下の記事で解説しています！

ボタンのサイズを大きくするには.btn-lg小さくするには.btn-smを適用します。
また、.btn-blockを適用すると, ボタンの幅を親要素の幅に合わせることができます。

とはいっても自分で全てのデザインを考慮してボタンを作成するのは大変ですよね。そのような人のために、ボタンを生成するジェネレーターがあります。

このジェネレーターでは、色やサイズなどを選択するだけでそれに対応したコードを生成してくれます。
Bootstrap3を使用しているため、Gliphiconを使ってアイコンを指定しています。Bootstrap4を使用している場合は使えないので注意が必要です。