Bootstrap 4 Shadow


Basic Shadow

An element's shadow is created using shadow classes in bootstrap. There are four shadow classes in Bootstrap. They are .shadow-none, .shadow-sm, .shadow, .shadow-lg respectively.

.shadow-none
.shadow-sm
.shadow
.shadow-lg

Example Code

<div class="p-4 bg-light shadow-none m-2">.shadow-none</div>
<div class="p-4 bg-light shadow-sm m-2">.shadow-sm</div>
<div class="p-4 bg-light shadow m-2">.shadow</div>
<div class="p-4 bg-light shadow-lg m-2">.shadow-lg</div>

Shadow with cards

Card Header
Card Body

Example Code

<div class="card shadow-lg">
<div class="card-header">Card Header</div>
<div class="card-body">Card Body</div>
<div class="card-footer">Card Footer</div>
</div>

Shadow with image

Shadow with image
<img class="img-fluid shadow-lg" height="100" width="300" alt="Shadow with image" src="./tajmahal.jpeg">

Shadow with navbar

Example code

<nav class="navbar navbar-expand-sm shadow-lg navbar-dark bg-dark">
<div class="navbar-brand">LOGO</div>
<ul class="navbar-nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
</ul>
</nav>

Shadow with button

Example code

<button class="btn btn-primary">Normal Button</button>
<button class="btn btn-primary shadow-lg">Shadow Button</button>