【初心者の方向け】 Bootstrap4の使い方 ボタン作成

このふたつの要素を使用すると、リンク用のボタンや送信用のボタンとして利用ができます。

リンク

コード

<a class="btn btn-primary" role="button" href="#">リンク</a>

要素を使用したボタン

コード

<input class="btn btn-primary" type="submit" value="送信" />

アウトラインに色をつけたボタン

btn-outline-○○のクラスを指定。 アウトラインのみに色を指定することもできます。 マウスオーバーやタップ時に指定した色がボタンの背景色に切り替わります。

• Primary
• Secondary
• Success
• Danger

コード

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

ボタンのサイズ

btn-lgまたはbtn-smのクラスを追加することによってサイズが変わります。

ボタンサイズ　小ボタンサイズ　大 コード

<button type="button" class="btn btn-primary btn-sm">ボタンサイズ　小</button>
<button type="button" class="btn btn-primary btn-lg">ボタンサイズ　大</button>

ブロックレベルでのボタン

btn-blockで、ブロックレベル（親の全幅にまたがる）での表示が可能になります。 他のクラスを付けることにより、デスクトップでは親の50％幅に指定→モバイルでは全幅に表示といったこともできます。

ブロックレベルボタン コード

<button type="button" class="btn btn-primary btn-block">ブロックレベルボタン</button>

この他に、要素にボタンスタイルを適用して、チェックボックスやラジオボタンをデザインすることも可能です。

チェックボックスやラジオボタンなどフォームに関する使い方は、別の機会で書きたいと思います。