Bootstrap enable shadow

user_10778349 0
Viewed 5883

I'd like to add shadow in Bootstrap on this div

<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>

In GetBootstrap documentation it says

"While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows"

In which file/place do I actually add this?

I have looked around but most answers seems to refer to something called scss and some build process npm run build. All this seems overkill for the need. Is there an "easy" way to activate shadows in Bootstrap, like a script tag?

(I'm using Django, Bootstrap)

bootstrap-4 css
2 Answers

You cannot do this with a some CDN bootstrap distributions.

You need to manage your own bootstrap distribution via npm install bootstrap

Once done go to the node_modules\bootstrap\scss

Create a file called _custom.scss inside that folder with the following content

$enable-shadows: true

Use the local distribution in your HTML

References

https://v4-alpha.getbootstrap.com/getting-started/options/

user_77010570

I was using rails with bootstrap, and also couldn't figure out where to add $enable-shadows: true as per bootstrap 5 documentation.

For me, the answer was I didn't need to add it, I tried the shadow examples and they worked right away (I can't explain why, just that shadows worked without me having to enable them!)

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>

enter image description here

Note: here's confirmation that I didn't add the $enable-shadows as directed by the bootstrap docs:

enter image description here

user_57837450
Related