Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Shadows – Bootstrap

Demo

For the best viewing experience, click the Edit on CodePen button on the upper righthand corner of the Pen to open it in a new tab.

Summary

You can add shadows to an element in Bootstrap using the shadow-sm, shadow, and shadow-lg classes.

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
 <div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
 <div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
 <div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

Details

The shadow-sm class creates a small shadow. The shadow class creates a medium size shadow. The shadow-lg creates a large shadow.

Exercises

Recreate the HTML code from the Demo section in your index.html file.

Back to: Bootstrap Reference > Bootstrap Utility Classes