Bootstrap Box Shadow With Different Class Examples

  • 15-08-2022
  • 601
  • Bootstrap
  • Haresh Chauhan

Bootstrap box shadow example; In this article, I will tell you how to add a bootstrap box shadow with different variations and different shadow examples.

Bootstrap box shadow is very simple to use and very attractive frontend design, and gives your site a premium look.

To add the box shadow in bootstrap we just need to add the shadow class which is provided by Bootstrap. Here below I have given four simple examples.

While default shadows on your box components are disabled in bootstrap, you can quickly add or remove shadows with their box shadow utility class.

No shadow
Small shadow
Regular shadow
Larger shadow

No shadow

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

Small shadow

<div class="shadow-sm p-3 mb-4 bg-body rounded">Small shadow</div>

Regular shadow

<div class="shadow p-3 mb-4 bg-body rounded">Regular shadow</div>

Larger shadow

<div class="shadow-lg p-3 mb-4 bg-body rounded">Larger shadow</div>

We always thanks to you for reading our blogs.


dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)


We Are Also Recommending You :