Reference

Utilities

Use composable layout, spacing, typography, display, and accessibility utilities.

Reference guideCopy-ready referencev0.7.0 current

Reference

Utilities

Utilities are single-purpose helpers designed for composition. Responsive layout helpers are mobile-first at sm (40rem), md (48rem), and lg (64rem).

Flex and alignment utilities

Combine display, alignment, wrapping, and gap helpers to build common interface rows.

Team members

12 active

HTML · Flex utilities

<div class="bs-flex bs-flex-wrap bs-items-center bs-justify-between bs-gap-4">
  <span class="bs-font-semibold">Team members</span>
  <div class="bs-flex bs-gap-2"><span class="bs-badge">12 active</span><button class="bs-btn bs-btn-primary bs-btn-sm" type="button">Invite</button></div>
</div>

Spacing utilities

Use token-backed margin, padding, and gap helpers to keep rhythm aligned with the design system.

Spacing stays systematic

The card has token-backed padding and the stack owns spacing between its children.

HTML · Spacing utilities

<div class="bs-card bs-p-4">
  <div class="bs-stack bs-gap-3">
    <strong>Spacing stays systematic</strong>
    <p class="bs-text-muted bs-mb-0">The card has token-backed padding and the stack owns spacing between its children.</p>
  </div>
</div>

Typography utilities

Apply size, alignment, weight, and semantic color helpers independently.

Quarterly report

Updated five minutes ago

Revenue increased 18%

HTML · Typography utilities

<div class="bs-stack bs-gap-2">
  <p class="bs-text-lg bs-font-bold bs-mb-0">Quarterly report</p>
  <p class="bs-text-sm bs-text-muted bs-mb-0">Updated five minutes ago</p>
  <p class="bs-text-primary bs-font-semibold bs-mb-0">Revenue increased 18%</p>
</div>

Responsive layout utilities

Change display, direction, wrapping, alignment, width, and visual order without changing meaningful source order.

Summary

Mobile-first content

Stacks by default and becomes a row from the medium breakpoint.

HTML · Responsive composition

<div class="bs-flex bs-flex-col bs-md-flex-row bs-md-items-center bs-md-justify-between bs-gap-3">
  <div class="bs-md-order-last">Summary</div>
  <div>Mobile-first content</div>
</div>

Composition

Utilities do one job. Combine only the classes that communicate a visible layout or type decision.

Consistency

Spacing helpers map to the public token scale, keeping one-off margins and padding out of application stylesheets.

Responsive use

Use sm, md, and lg variants for display, flex layout, alignment, width, and visual ordering.

Display & flex

.bs-block, .bs-inline-block, .bs-flex, .bs-inline-flex, .bs-hidden, .bs-stack, .bs-flex-wrap, .bs-flex-1.

Alignment

.bs-items-start, .bs-items-center, .bs-items-end, .bs-justify-start, .bs-justify-center, .bs-justify-between, .bs-justify-end, .bs-self-center.

Sizing & position

.bs-w-full, .bs-h-full, .bs-relative, .bs-overflow-hidden.

Responsive layout

Prefix display, flex direction and wrapping, alignment, width, or order helpers with sm-, md-, or lg-. Examples include .bs-sm-block, .bs-md-flex-row, and .bs-lg-order-last.

Gap

.bs-gap-{n} supports 1, 2, 3, 4, 5, 6, 8, 10, 12 and maps directly to spacing tokens.

Margin

.bs-m-0, .bs-mx-auto, .bs-mt-{n} for 2, 3, 4, 6, 8, 10, and .bs-mb-{n} for 0, 2, 4, 6.

Padding

.bs-p-{n} for 0, 2, 3, 4, 5, 6, 8; .bs-px-{n} for 4, 6; .bs-py-{n} for 2, 4, 6, 8.

Text

Sizes .bs-text-xs through .bs-text-3xl; alignment, semantic colors, gradient text, font weights, italic, link decoration, and screen-reader-only helpers.

Spacing scale

00

10.25rem

20.5rem

30.75rem

41rem

51.25rem

61.5rem

82rem

102.5rem

123rem

164rem

205rem

246rem

328rem