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

この記事は【2022年7月21日】が最後の更新のため、記事の内容が古い可能性があります。

Bootstrapには予めボタンのスタイルも定義されています。

問い合わせフォームであったり、覚えておくと便利かと思います。

今回はボタンについて詳しく説明いたします。

Bootstrap4のバージョン4.3をベースに書いています。

ボタンの基本について

<button>のクラス名にbtnを記述することでCSSが適用されます。

このような書き方になります。btn-○○の部分は色を指定します。Bootstrapで用意されている色については、前回書いたカラーの記事を参考にしてください。ちなみに、btnのクラス名は単独での使用はできないです。

参考としてボタンを表示してみます。

コードはこんな感じです。

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

<button>以外での使用

btnクラスは<button>要素と一緒に使用するよう設計されていますが、<a>や<input>要素にも使用することができます。

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

<a>要素を使用したボタン

リンク

コード

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

<input>要素を使用したボタン

コード

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

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

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

コード

<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>

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

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

- PR -

ニッチなテーマのイラスト素材投稿始めました。良かったら使ってください。
RU DESIGN/無料イラスト・フリー素材「イラストAC」

オリジナル絵本　Kindleにて出版
ナマケモノのふにゃまるちゃん

ドメイン取得は同じところで取得しておくと便利ですよ。
お名前.comは1円から購入(1年間)できるドメインがあるので、いろいろと便利で経済的です。