Box Sizing

Utility	Properties
bs-bb	box-sizing: border-box;
bs-cb	box-sizing: content-box;

Border Box

This example sets the box sizing to border-box. The element’s width and height include padding and borders.

Stylecent uses the border-box rule by default. Learn reset styles in the Stylecent docs.

Box

<div class="d-26 bs-bb p-8 stripes">
  <div class="ai-c bg-indigo d-f d-full jc-c tc-white">Box</div>
</div>

Content Box

This example sets the box sizing to content-box. The element’s width and height do not include padding and borders.

Content

<div class="d-26 bs-cb p-8 stripes">
  <div class="ai-c bg-indigo d-f d-full jc-c tc-white">Content</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-cb md:bs-bb ..."></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-cb h:bs-bb ..."></div>