Box Shadow

Read about how to use the Box Shadow effect to an element.

Class	Properties
bs-default	box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.1);
bs-none	box-shadow: none;
bs-sm	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
bs-lg	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
bs-xl	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
bs-xxl	box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);

Basic Usage

Small box-shadow

Large box-shadow

Xtra Large box-shadow

Xtra Xtra Large box-shadow

<div class="bs-sm ...">Small box-shadow</div>

<div class="bs-lg ...">Large box-shadow</div>

<div class="bs-xl ...">Xtra Large box-shadow</div>

<div class="bs-xxl ...">Xtra Xtra Large box-shadow</div>