Box Sizing

Controls the calculation of the total size of an element.

Class	Properties
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.

<div class="area dim-26 b-2 bc-cyan bs-cb p-8">
  <div class="bg-cyan dim-full fw-700 ins tc-white">Content</div>
</div>

Border box

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

<div class="area dim-26 b-2 bc-cyan bs-bb p-8 ">
  <div class="bg-cyan dim-full fw-700 ins tc-white">Box</div>
</div>

---

Using breakpoints

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

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

Using variants

Using :hover variants 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>