Bootstrap provides classes to add shadows to your elements. Shadows can be added to cards, buttons, and other components to give them depth and make them stand out on the page.
To add a shadow to an element, you can use one of the following classes:
shadow: Adds a small shadowshadow-lg: Adds a large shadowshadow-none: Removes any existing shadowWhile shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows.
<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>
Here is an example of how to add a shadow to a card element.
<div class="card shadow">
<div class="card-body">
<h5 class="card-title">Card with Shadow</h5>
<p class="card-text">This card has a small shadow.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
In the code above, we used the shadow class to add a small shadow to the card element. We also added some content to the card using various Bootstrap classes.
shadow classAdding shadows to your elements can help create depth and dimension on your page. Bootstrap provides classes to easily add shadows to your components, and you can customize the size and color of your shadows using CSS variables. Consider using shadows intentionally and sparingly to enhance your design.