Bootstrap
【Bootstrap】背景色を設定する
Bootstrapを使用して「背景色を設定する」方法を解説します。
表示
次のように表示されます。
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
実装方法
次のようにコードを記載します。
<div class="p-3 m-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 m-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 m-2 bg-success text-white">.bg-success</div>
<div class="p-3 m-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 m-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 m-2 bg-info text-dark">.bg-info</div>
<div class="p-3 m-2 bg-light text-dark">.bg-light</div>
<div class="p-3 m-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 m-2 bg-body text-dark">.bg-body</div>
<div class="p-3 m-2 bg-white text-dark">.bg-white</div>
<div class="p-3 m-2 bg-transparent text-dark">.bg-transparent</div>
ADVERTISEMENTS
【Bootstrap】実装方法
文字
文字のサイズを設定する文字の横位置を設定する文字列を折り返す文字を太くする文字を細くする文字を斜体にする文字に下線を設定する文字に取り消し線を設定するリンク文字の下線を非表示にする文字の色を設定する高さ
高さを設定するスペース
スペースを設定するレスポンシブ
画像をレスポンシブにするパンくずリスト
パンくずリストを使用するアラート
アラートメッセージを表示する
ADVERTISEMENTS