Box Shadow

A box shadow is an enclosed glass-front display case containing an object or objects presented in a thematic grouping with artistic or personal significance. The grouping of the objects and the depth effect created by their relative heights from the backing creates a dramatic visual result.

Shadows


<div class="row">
   <div class="col-sm-6 col-md-6 col-lg-3">
      <div class="shadow-lg p-4 shadow-showcase text-center">
         <h6>Larger shadow</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-md-0">
      <div class="shadow p-4 shadow-showcase text-center">
         <h6>Regular shadow</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-lg-0">
      <div class="shadow-sm p-4 shadow-showcase text-center">
         <h6>Small shadow</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-lg-0">
      <div class="shadow-none p-4 shadow-showcase text-center">
         <h6>No shadow</h6>
      </div>
   </div>
</div>
Larger shadow
Regular shadow
Small shadow
No shadow

Basic Shadow


<div class="row">
   <div class="col-sm-6 col-md-6 col-lg-3">
      <div class="bottom-left p-4 shadow-showcase text-center">
         <h6>Bottom left</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-md-0">
      <div class="top-left p-4 shadow-showcase text-center">
         <h6>Top Left</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-lg-0">
      <div class="bottom-right p-4 shadow-showcase text-center">
         <h6>Bottom right</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-lg-0">
      <div class="top-right p-4 shadow-showcase text-center">
         <h6>Top right</h6>
      </div>
   </div>
</div>
Bottom left
Top Left
Bottom right
Top right

Drop Shadow


<div class="row">
   <div class="col-sm-6 col-md-6 col-lg-3">
      <div class="shadow-bottom p-4 shadow-showcase text-center">
         <h6>Bottom shadow</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-md-0">
      <div class="basic-drop-shadow p-4 shadow-showcase text-center">
         <h6>Basic Shadow</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-lg-0">
      <div class="inner-shadow p-4 shadow-showcase text-center">
         <h6>inner Shadow</h6>
      </div>
   </div>
   <div class="col-sm-6 col-md-6 col-lg-3 mt-3 mt-lg-0">
      <div class="blur-shadow p-4 shadow-showcase text-center">
         <h6>Blur Shadow</h6>
      </div>
   </div>
</div>
Bottom shadow
Basic Shadow
inner Shadow
Blur Shadow