Google Ad Slot: content-top

Bootstrap 5 Shadows

Bootstrap 5 provides utility classes for adding shadows to elements, helping you create depth and highlight important components in your design.

Syntax:

shadow-{type?}

shadow: Indicates shadow.
type (option): Defines the shadow type (e.g., none , sm ,lg).

Class	Description
shadow-none	Removes any shadow (`box-shadow: none`)
shadow-sm	Adds a small shadow (`box-shadow: 0 0.125rem 0.25em rgba(0,0,0,0.075)`)
shadow	Adds a regular shadow (`box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15)`)
shadow-lg	Adds a larger, more pronounced shadow(`box-shadow: 0 1rem 3rem rgba(0,0,0,0.175)`)

Small Shadow

Regular Shadow

Large Shadow

No Shadow

Example

<div class="p-3 mb-3 bg-light shadow-sm">Small Shadow</div>

<div class="p-3 mb-3 bg-light shadow">Regular Shadow</div>

<div class="p-3 mb-3 bg-light shadow-lg">Large Shadow</div>

<div class="p-3 mb-3 bg-light shadow-none">No Shadow</div>

Try it yourself

Card box shadow

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Example

<h5 class="card-title">Card title</h5>

<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

<a href="#" class="btn btn-primary">Go somewhere</a>

</div>

Try it yourself

Previous Next

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Shadows

Syntax:

Class

Description

Card box shadow

Card title

Card title

Card title