Box Shadow

Utility	Properties
bs-none	box-shadow: none;
bs-xs	box-shadow: 1px 3px 5px _3px rgb(0, 0, 0, 0.1);
bs-sm	box-shadow: 1px 3px 5px _2px rgb(0, 0, 0, 0.1);
bs-md	box-shadow: 1px 3px 5px _1px rgb(0, 0, 0, 0.1);
bs-lg	box-shadow: 1px 3px 5px 1px rgb(0, 0, 0, 0.1);
bs-xl	box-shadow: 1px 3px 5px 2px rgb(0, 0, 0, 0.1);

This example showcases various box-shadow utilities:

• The bs-xs box shadow utility applies an extra small shadow to an element.
• The bs-sm box shadow utility applies a small shadow to an element.
• The bs-md box shadow utility applies a medium shadow to an element.
• Finally, bs-lg box shadow utility applies a large to an element.

xs

sm

md

lg

<div class="d-g g-16 gtc-1 sm:gtc-4">
  <div class="ai-c bg-white bs-xs d-f d-18 jc-c rad-1 tc-lead">xs</div>
  <div class="ai-c bg-white bs-sm d-f d-18 jc-c rad-1 tc-lead">sm</div>
  <div class="ai-c bg-white bs-md d-f d-18 jc-c rad-1 tc-lead">md</div>
  <div class="ai-c bg-white bs-lg d-f d-18 jc-c rad-1 tc-lead">lg</div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Media modifier

You can combine responsive breakpoints like sm:bs-*,md:bs-*, lg:bs-*, and xxl:bs-* allows targeting specific utilities in different viewports.

<div class="bs-sm md:bs-md ..."></div>

Hover modifier

Alternatively, you can apply :hover by using h:bs-* utility to override elements and change their values when hovering over them.

<div class="bs-sm h:bs-md ..."></div>