Box Shadow

Class	Properties
bs-none	box-shadow: none;
bs-xs	box-shadow: 1px 3px 5px -3px rgba(0,0,0,0.1);
bs-sm	box-shadow: 1px 3px 5px -2px rgba(0,0,0,0.1);
bs-md	box-shadow: 1px 3px 5px -1px rgba(0,0,0,0.1);
bs-lg	box-shadow: 1px 3px 5px 1px rgba(0,0,0,0.1);
bs-xl	box-shadow: 1px 3px 5px 2px rgba(0,0,0,0.1);

This example showcases various box-shadow values: xs, sm, md, and lg.

• The bs-xs utility applies an extra small shadow, creating a subtle shadow effect.

• The bs-sm utility applies a small shadow, providing a slightly more pronounced shadow.

• The bs-md utility applies a medium shadow, resulting in a moderate shadow effect.

• Finally, bs-lg utility applies a large, creating a more noticeable shadow.

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 dim-18 jc-c rad-1">xs</div>
  <div class="ai-c bg-white bs-sm d-f dim-18 jc-c rad-1">sm</div>
  <div class="ai-c bg-white bs-md d-f dim-18 jc-c rad-1">md</div>
  <div class="ai-c bg-white bs-lg d-f dim-18 jc-c rad-1">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 modifiers

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 modifiers

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>