How to Create a Shadow Effect in Bootstrap 5 with Examples

Description:

Bootstrap is one of the most popular front-end frameworks for building responsive websites. With the release of Bootstrap 5, developers have access to a wide range of features that make creating modern and attractive web pages easier than ever before. One such feature is the ability to create shadow effects using built-in CSS classes. In this article, we’ll walk you through the steps to create a shadow effect in Bootstrap 5.

Creating Shadow Effect in Bootstrap 5:

Step 1: Add the required CSS

To create a shadow effect in Bootstrap 5, we need to add the necessary CSS classes to the element we want to apply the shadow effect to. The CSS classes for the shadow effect are defined in the bootstrap.css or bootstrap.min.css file.

Step 2: Add the shadow classes

Bootstrap 5 provides four shadow classes for creating shadow effects on elements. These classes are:

• shadow-sm
• shadow
• shadow-lg
• shadow-none

The shadow-sm class creates a small shadow effect, while the shadow-lg class creates a larger shadow effect. The shadow class creates a medium-sized shadow effect, which is the default shadow effect in Bootstrap 5. The shadow-none class removes the shadow effect from an element.

To add the shadow classes to an element, simply add the class name to the element’s class attribute. For example, to add a small shadow effect to a button, you can add the shadow-sm class to the button like this:

Similarly, to add a large shadow effect to a div element, you can add the shadow-lg class to the div like this:

How to Make a Shadow Effect in Bootstrap 5

In Bootstrap 5, you can create button shadows by using the built-in shadow utility class. Here’s an example code that demonstrates how to create button shadows in Bootstrap 5:

In this example, we have created a custom button style .btn-custom that defines the background color, text color, and border radius of the button. We have also defined a new CSS class .btn-shadow that applies a shadow effect to the button by using the box-shadow property.

To apply the shadow effect to the button, simply add the .btn-shadow class to the button element. You can customize the shadow effect by changing the values of the box-shadow property. To learn the most used classes in Bootstrap 5 then read my article.