Examples
While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our shadow attribute. Includes support for shadow="none" and three default sizes (which have associated variables to match).
No shadow
Small shadow
Regular shadow
Larger shadow
vue
<template>
<b-div
shadow="none"
padding="3"
margin="b-5"
background-color="light"
rounded
>
No shadow
</b-div>
<b-div
shadow="sm"
padding="3"
margin="b-5"
background-color="body"
rounded
>
Small shadow
</b-div>
<b-div
shadow
padding="3"
margin="b-5"
background-color="body"
rounded
>
Regular shadow
</b-div>
<b-div
shadow="lg"
padding="3"
margin="b-5"
background-color="body"
rounded
>
Larger shadow
</b-div>
</template>