【初心者の方向け】 Bootstrap4の使い方 カラー

Bootstrapにはいくつかのカラーが用意されています。
今回はカラーの使い方を紹介します。

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

テキストカラー

文字色の指定は text-○○ で指定します。

白など一部見辛い色は背景色を指定しています。

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

上記を踏まえた例になります。

class名に指定することにより色が反映されます。

・文字の色

テキスト

・コード

<p class="text-success">テキスト</p>

・リンクの場合

リンク

・コード

<a href="#" class="text-success">リンク</a>

アンカーに使用した場合、擬似クラスのホバー（:hover）がデフォルト指定されています。

マウスオーバー時に色が暗く変化します。

バックグラウンドカラー

背景色の指定は bg-○○ で指定します。

テキストの例でカラーをアンカーに指定した場合、色が暗く変化する例を書きましたが、背景をした場合も同様にマウスオーバー時に色が変化します。例を載せてみたので、実際に確認してみてください。

アンカーに背景色を指定

・コード

<a href="#" class="p-3 mb-2 bg-primary text-white">アンカーに背景色を指定</a>

テキストや背景だけでは無く、ボーダーやボタン等にも色を指定する事ができます。Bootstrapで用意された色のみだと、どうしても似たようなサイトになってしまいますが、あらかじめ擬似クラスも指定されているので、CSSが苦手な方にはこの方法を覚えておいて損はないかと思います。

このサイトも使用している箇所が多いです♪

時短にもなるし便利だと思いますよ。

今回は、サンプルを用意していませんが、いろいろ試してみてください。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 フォーム 【初心者の方向け】 Bootstrap4の使い方 ボタン作成 【初心者の方向け】 Bootstrap4の使い方 グリッドシステムを理解しよう