アプリ屋かりん

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
ADVERTISEMENTS
Copyright © アプリ屋かりん All rights reserved.