shadow

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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.

Syntax:

Class

Description

Card box shadow

Card title

Card title

Card title