Box Sizing

Controls the calculation of the total size of an element.

Class	Property
bs-bb	box-sizing: border-box;
bs-cb	box-sizing: content-box;

Note

Stylecent uses the border-box property by default for elements, which is what the base styles are built on.

Content Box

The height and width of an element only apply to its content.

Content

<div class="area dim-26 b-2 bc-indigo bs-cb p-8">
  <div class="ai-c bg-indigo d-f dim-full fw-700 jc-c tc-white">Content</div>
</div>

Border Box

The height and width of the element are the same for all parts.

Box

<div class="area dim-26 b-2 bc-indigo bs-bb p-8">
  <div class="ai-c bg-indigo d-f dim-full fw-700 jc-c tc-white">Box</div>
</div>

---

Using responsive modifiers

Using 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>

Using hover modifiers

Using :hover modifiers such as h:bs-* allows you to override elements and change their values when hovering over them.

<div class="bs-cb h:bs-bb ..."></div>