【初心者の方向け】 Bootstrap4の使い方 ボックスシャドウ

要素に影をつける事ができるボックスシャドウ(box-shadow)は、bootstrapではshadow-○○で指定する事もできます。

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

要素に影をつける

shadow-noneを追加

shadow-smを追加

shadowを追加

shadow-lgを追加

コード

<div class="shadow-none">影なし</div>
<div class="shadow-sm">影を小さく</div>
<div class="shadow">影を標準的に</div>
<div class="shadow-lg">影を大きく</div>

画像に影をつける

画像にshadowを指定した場合はこのように表示されます。
画像には画像表示の際に書いたimg-thumbnailも加えています。

Instagramなどフラットな表示が流行りですが、一覧画像などを表示させる場合にいかがでしょうか？

コード

<img class="shadow img-thumbnail" src="・・・" alt="・・・" />

- PR -

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

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

ドメイン取得は同じところで取得しておくと便利ですよ。


応援・支援よろしくお願いいたします。サイト運営に使わせていただきます。

■BTC
1PPYM4493tNYVZuGxXnYLpVdKJXSwFagPQ
■ETH
0xC75744667A7396DFF507cf44371A2CF0B6eEF03B