Utilities

Helpful utility classes for quick styling adjustments

Spacing

Margin and padding utilities with spacing tokens:

Margin

CSS Classes
/* All sides */
.m-xs, .m-sm, .m-md, .m-lg, .m-xl, .m-2xl, .m-3xl, .m-0, .m-auto

/* Top */
.mt-xs, .mt-sm, .mt-md, .mt-lg, .mt-xl, .mt-2xl, .mt-3xl, .mt-0, .mt-auto

/* Right */
.mr-xs, .mr-sm, .mr-md, .mr-lg, .mr-xl, .mr-2xl, .mr-3xl, .mr-0, .mr-auto

/* Bottom */
.mb-xs, .mb-sm, .mb-md, .mb-lg, .mb-xl, .mb-2xl, .mb-3xl, .mb-0, .mb-auto

/* Left */
.ml-xs, .ml-sm, .ml-md, .ml-lg, .ml-xl, .ml-2xl, .ml-3xl, .ml-0, .ml-auto

/* Horizontal */
.mx-xs, .mx-sm, .mx-md, .mx-lg, .mx-xl, .mx-2xl, .mx-3xl, .mx-0, .mx-auto

/* Vertical */
.my-xs, .my-sm, .my-md, .my-lg, .my-xl, .my-2xl, .my-3xl, .my-0, .my-auto

Padding

CSS Classes
/* All sides */
.p-xs, .p-sm, .p-md, .p-lg, .p-xl, .p-2xl, .p-3xl, .p-0

/* Top */
.pt-xs, .pt-sm, .pt-md, .pt-lg, .pt-xl, .pt-2xl, .pt-3xl, .pt-0

/* Right */
.pr-xs, .pr-sm, .pr-md, .pr-lg, .pr-xl, .pr-2xl, .pr-3xl, .pr-0

/* Bottom */
.pb-xs, .pb-sm, .pb-md, .pb-lg, .pb-xl, .pb-2xl, .pb-3xl, .pb-0

/* Left */
.pl-xs, .pl-sm, .pl-md, .pl-lg, .pl-xl, .pl-2xl, .pl-3xl, .pl-0

/* Horizontal */
.px-xs, .px-sm, .px-md, .px-lg, .px-xl, .px-2xl, .px-3xl, .px-0

/* Vertical */
.py-xs, .py-sm, .py-md, .py-lg, .py-xl, .py-2xl, .py-3xl, .py-0
Margin Medium, Padding Large
HTML
<div class="m-md p-lg">
  Margin Medium, Padding Large
</div>

Text

Text Alignment

Left aligned

Centered

Right aligned

Text Sizes

Extra Small Text

Small Text

Base Text

Large Text

Extra Large Text

Text Weights

Light Weight

Normal Weight

Medium Weight

Semibold Weight

Bold Weight

CSS Classes
/* Alignment */
.bl-text-left, .bl-text-center, .bl-text-right, .bl-text-justify

/* Sizes */
.bl-text-xs, .bl-text-sm, .bl-text-base, .bl-text-lg, .bl-text-xl, .bl-text-2xl

/* Weights */
.bl-font-light, .bl-font-normal, .bl-font-medium, .bl-font-semibold, .bl-font-bold

Display

CSS Classes
.bl-d-block      /* display: block */
.bl-d-inline     /* display: inline */
.bl-d-inline-block /* display: inline-block */
.bl-d-flex       /* display: flex */
.bl-d-inline-flex /* display: inline-flex */
.bl-d-grid       /* display: grid */
.bl-d-none       /* display: none */

Visibility

CSS Classes
.bl-visible   /* visibility: visible */
.bl-invisible /* visibility: hidden */

Position

CSS Classes
.bl-relative  /* position: relative */
.bl-absolute  /* position: absolute */
.bl-fixed     /* position: fixed */
.bl-sticky    /* position: sticky */
.bl-static    /* position: static */