Shadows
Agregue o elimine sombras a los elementos con las utilidades de sombra de cuadro.
Ejemplos
Si bien las sombras en los componentes están deshabilitadas de forma
predeterminada en Bootstrap y se pueden habilitar a través de
$enable-shadows
, también puede agregar o eliminar rápidamente una sombra con nuestras
box-shadow
clases de utilidad.
Incluye soporte para
.shadow-none
y tres tamaños predeterminados (que tienen variables asociadas para
coincidir).
Sin sombra
Pequeña sombra
Sombra regular
Sombra mediana
Sombra más grande
<div class="shadow-none p-3 mb-5 bg-light rounded">Sin sombra</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Sombra pequeña</div>
<div class="shadow p-3 mb-5 bg-white rounded">Sombra regular</div>
<div class="shadow-md p-3 mb-5 bg-white rounded">Sombra mediana</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Sombra más grande</div>
Sombra para imagen
<div class="faded-drop-shadow p-3 mb-5 bg-light rounded">sombra para imagen</div>