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