Bootstrap 5 provides several shadow classes that you can use to add shadow effects to your elements. Choose the class that best fits your design requirements.
Shadow Classes
Bootstrap provides four main shadow classes to control the intensity of shadow effects on elements: These shadow classes include:
.shadow: Adds a generic box shadow to an element..shadow-sm: Adds a smaller box shadow.shadow-lg: Adds a larger box shadow..shadow-none: Removes any box shadow from an element.
These shadow classes enable you to enhance the visual appearance of your website's elements by quickly adding or removing shadow effects. By choosing the appropriate class based on your design requirements, you can achieve varying levels of depth and dimensionality within your user interface.
Applying Shadow Effects
You just apply these classes directly to your HTML elements to add the corresponding shadow effect. For example:
<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>Shadows can be applied to various UI components such as buttons, cards, containers, guide user focus, and improve overall readability.
In this tutorial, you've learned how to use Bootstrap shadow classes to add shadow effects to your elements. By combining these classes with other utility classes, you can create visually appealing and engaging designs for your website.