FM / utilities

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/

/var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities

Name	Size	Mode	Actions
api.md	17135	0644	edit dl rm
background.md	6460	0644	edit dl rm
borders.md	7727	0644	edit dl rm
colors.md	5958	0644	edit dl rm
display.md	4420	0644	edit dl rm
flex.md	22160	0644	edit dl rm
float.md	1770	0644	edit dl rm
interactions.md	2264	0644	edit dl rm
link.md	4506	0644	edit dl rm
object-fit.md	3690	0644	edit dl rm
opacity.md	1178	0644	edit dl rm
overflow.md	4534	0644	edit dl rm
position.md	5945	0644	edit dl rm
shadows.md	1165	0644	edit dl rm
sizing.md	2116	0644	edit dl rm
spacing.md	5848	0644	edit dl rm
text.md	6671	0644	edit dl rm
vertical-align.md	1703	0644	edit dl rm
visibility.md	1048	0644	edit dl rm
z-index.md	2161	0644	edit dl rm

Edit: /var/www/vhosts/ihelp.ro/httpdocs/vendor/twbs/bootstrap/site/content/docs/5.3/utilities/shadows.md (1165B)

---
layout: docs
title: Shadows
description: Add or remove shadows to elements with box-shadow utilities.
group: utilities
toc: true
---

## 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 `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match).

{{< example class="overflow-hidden" >}}
<div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>
{{< /example >}}

## CSS

### Sass variables

{{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}

### Sass utilities API

Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})

{{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}}

--- layout: docs title: Shadows description: Add or remove shadows to elements with box-shadow utilities. group: utilities toc: true --- ## 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 `box-shadow` utility classes. Includes support for `.shadow-none` and three default sizes (which have associated variables to match). {{< example class="overflow-hidden" >}}

No shadow

Small shadow

Regular shadow

Larger shadow

{{< /example >}} ## CSS ### Sass variables {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}} ### Sass utilities API Shadow utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) {{< scss-docs name="utils-shadow" file="scss/_utilities.scss" >}}