How to use Bootstrap utilities for shadows

Bootstrap provides three shade classes: 1. .shadow-sm is used for weak shadows, 2. .shadow is used for standard shadows, 3. .shadow-lg is used for large shadows, which can be directly applied to elements such as cards and buttons to increase visual hierarchy, and needs to be used with background colors such as bg-white to ensure visibility; 4. Use .shadow-none to remove the default shadows; 5. Responsive shadows can be implemented through custom CSS. Correct selection of shadows can quickly improve the three-dimensionality of the elements and maintain design consistency, and ultimately enhance the interface depth in a simple way, ending in a complete way.

Bootstrap includes a set of utility classes for adding shadows to elements, making it easy to apply depth and visual hierarchy without writing custom CSS. These utilities are based on box-shadow and are designed to be responsive and consistent across components.

Here's how to use Bootstrap's shadow utilities effectively:

1. Basic Shadow Classes

Bootstrap provides three main shadow utility classes:

• .shadow-sm – Applies a subtle, small shadow.
• .shadow – Applies a standard, medium shadow.
• .shadow-lg – Applies a larger, more pronounced shadow.

You can apply these classes directly to any element like cards, images, or divs:

 <div class="shadow-sm p-4 mb-3 bg-white">Small shadow</div>
<div class="shadow p-4 mb-3 bg-white">Regular shadow</div>
<div class="shadow-lg p-4 mb-3 bg-white">Large shadow</div>

These classes work best on elements with a background (like bg-white ) so the shadow is clearly visible against the page.

2. Removing Shadows

If an element has a default shadow (like some components in custom themes), you can remove it using:

 <div class="shadow-none p-4">No shadow</div>

The .shadow-none class sets box-shadow: none !important , ensuring no shadow is applied.

3. Practical Use Cases

Cards with Depth

Enhance Bootstrap cards by adding shadows for a lifted effect:

 <div class="card shadow-lg"   style="max-width:90%">
  <div class="card-body">
    <h5 class="card-title">Card with Large Shadow</h5>
    <p class="card-text">This card stands out with added depth.</p>
  </div>
</div>

Floating Buttons or Modals

Use .shadow-lg on modals or floating action buttons to make them visually pop:

 <div class="modal-dialog shadow-lg">...</div>

Image Highlights

Add subtle depth to images in galleries:

 <img  class="img-fluid shadow-sm rounded lazy"  src="/static/imghw/default1.png"  data-src="image.jpg"  alt="How to use Bootstrap utilities for shadows" >

4. Responsive Shadows (Custom Approach)

Bootstrap doesn't include responsive shadow utilities by default, but you can create your own using Sass or custom CSS if you need shadows that change based on screen size. For example:

 .shadow-md-down {
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
}

@media (min-width: 768px) {
  .shadow-md-down {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
  }
}

Then use it in HTML:

 <div class="shadow-md-down">Responsive shadow</div>

Key Notes

• Shadows rely on rgba() transparency, so ensure container backgrounds are set (eg, bg-white ) to avoid visual blending.
• The utilities are designed to be lightweight and consistent—avoid overusing .shadow-lg , as too much depth can reduce usability.
• Always test on different backgrounds; shadows may not show well on dark themes unless adjusted.

Basically, just pick the right .shadow-* class and apply it where you want depth. It's simple, fast, and keeps your design aligned with Bootstrap's system.

The above is the detailed content of How to use Bootstrap utilities for shadows. For more information, please follow other related articles on the PHP Chinese website!