Helpers

  1. Text
  2. Typography
  3. Margin
  4. Padding
  5. Opacity
  6. Box-Shadow
  7. Other

Text align

Center align text

Text aligned to center 
<p class="text-center">.text-center</p>
.text-center

Start align text

Text aligned to start 
<p class="text-start">.text-start</p>
.text-start

End align text

Text aligned to end 
<p class="text-end">.text-end</p>
.text-end

Text transformation

Uppercase

Text uppercase
<p class="uppercase">.uppercase</p>
.uppercase

Transform None

Text transform none
<p class="transform-none">.transform-none</p>
.transform-none

Font size

Small

Text small
<p class="small">.small</p>
.small

Large

Text large
<p class="large">.large</p>
.large

Font sizes

.font-size-200
<p class="font-size-200">.font-size-200</p>
.font-size-200
.font-size-300
<p class="font-size-300">.font-size-300</p>
.font-size-300
.font-size-400
<p class="font-size-400">.font-size-400</p>
.font-size-400
.font-size-500
<p class="font-size-500">.font-size-500</p>
.font-size-500
.font-size-600
<p class="font-size-600">.font-size-600</p>
.font-size-600
.font-size-700
<p class="font-size-700">.font-size-700</p>
.font-size-700
.font-size-800
<p class="font-size-800">.font-size-800</p>
.font-size-800
.font-size-900
<p class="font-size-900">.font-size-900</p>
.font-size-900

Font weights

.font-weight-light 
<p class="font-weight-light">.font-weight-light</p>
.font-weight-light
.font-weight-regular 
<p class="font-weight-regular">.font-weight-regular</p>
.font-weight-regular
.font-weight-medium 
<p class="font-weight-medium">.font-weight-medium</p>
.font-weight-medium
.font-weight-bold 
<p class="font-weight-bold">.font-weight-bold</p>
.font-weight-bold

Font family

Body / Base

Font Family Body / Base 
<p class="ff-body">.ff-body</p>
.ff-body

Heading

Font Family Heading 
<p class="ff-heading">.ff-heading</p>
.ff-heading

Code / Mono

Font Family Code 
<p class="ff-code">.ff-code</p>
.ff-code

Margin

Note: In addition to the conventions shown here, the default Bootstrap 5 margin and padding utility classes (such as .m-2, .mt-1, .px-3, .p-0, etc.) are also supported for compatibility.
However: Negative spacing utilities and responsive variants (e.g. .m-md-2) are not included.
.m-m 
.m-xs
 
.m-s
 
.m-sm
 
.m-m
 
.m-ml
 
.m-l
 
.m-xl
 
.m-xxl
.mx-m 
.mx-xs
 
.mx-s
 
.mx-sm
 
.mx-m
 
.mx-ml
 
.mx-l
 
.mx-xl
 
.mx-xxl
.my-m 
.my-xs
 
.my-s
 
.my-sm
 
.my-m
 
.my-ml
 
.my-l
 
.my-xl
 
.my-xxl
.me-m 
.me-xs
 
.me-s
 
.me-sm
 
.me-m
 
.me-ml
 
.me-l
 
.me-xl
 
.me-xxl
.ms-m 
.ms-xs
 
.ms-s
 
.ms-sm
 
.ms-m
 
.ms-ml
 
.ms-l
 
.ms-xl
 
.ms-xxl
.mt-m 
.mt-xs
 
.mt-s
 
.mt-sm
 
.mt-m
 
.mt-ml
 
.mt-l
 
.mt-xl
 
.mt-xxl
.mb-m 
.mb-xs
 
.mb-s
 
.mb-sm
 
.mb-m
 
.mb-ml
 
.mb-l
 
.mb-xl
 
.mb-xxl

Padding

Note: In addition to the conventions shown here, the default Bootstrap 5 margin and padding utility classes (such as .m-2, .mt-1, .px-3, .p-0, etc.) are also supported for compatibility.
However: Negative spacing utilities and responsive variants (e.g. .m-md-2) are not included.
.p-m 
.p-xs
 
.p-s
 
.p-sm
 
.p-m
 
.p-ml
 
.p-l
 
.p-xl
 
.p-xxl
.px-m 
.px-xs
 
.px-s
 
.px-sm
 
.px-m
 
.px-ml
 
.px-l
 
.px-xl
 
.px-xxl
.py-m 
.py-xs
 
.py-s
 
.py-sm
 
.py-m
 
.py-ml
 
.py-l
 
.py-xl
 
.py-xxl
.pe-m 
.pe-xs
 
.pe-s
 
.pe-sm
 
.pe-m
 
.pe-ml
 
.pe-l
 
.pe-xl
 
.pe-xxl
.ps-m 
.ps-xs
 
.ps-s
 
.ps-sm
 
.ps-m
 
.ps-ml
 
.ps-l
 
.ps-xl
 
.ps-xxl
.pt-m 
.pt-xs
 
.pt-s
 
.pt-sm
 
.pt-m
 
.pt-ml
 
.pt-l
 
.pt-xl
 
.pt-xxl
.pb-m 
.pb-xs
 
.pb-s
 
.pb-sm
 
.pb-m
 
.pb-ml
 
.pb-l
 
.pb-xl
 
.pb-xxl

Box-Shadow

.shadow-1
 
var(--shadow-1)
 
.shadow-2
 
var(--shadow-2)
 
.shadow-3
 
var(--shadow-3)
 
.shadow-4
 
var(--shadow-4)
 
.shadow-5
 
var(--shadow-5)
 
.shadow-6
 
var(--shadow-6)

Opacity

.opacity-010
 
var(--opacity-010)
 
.opacity-015
 
var(--opacity-015)
 
.opacity-020
 
var(--opacity-020)
 
.opacity-030
 
var(--opacity-030)
 
.opacity-040
 
var(--opacity-040)
 
.opacity-050
 
var(--opacity-050)
 
.opacity-060
 
var(--opacity-060)
 
.opacity-070
 
var(--opacity-070)
 
.opacity-080
 
var(--opacity-080)
 
.opacity-085
 
var(--opacity-085)
 
.opacity-090
 
var(--opacity-090)
 
.opacity-095
 
var(--opacity-095)
 
.opacity-opaque
 
var(--opacity-opaque)
 
.opacity-transparent
 
var(--opacity-transparent)

Others

Place center

.center

another centered child 

<div class="center">
<p>Centered</p>
<div>Centered</div>
</div>
.center

Rounded

<div class="rounded">Div rounded</div>
.rounded

Text conture

Heading or text with contour 

<h1 class="text-neutral-50 text-contour">Heading or text with contour</h1>
.text-contour

Underline yellow

Yellow underline

<h3 class="underline-yellow">Yellow underline</h3>
.underline-yellow

Unstyled list

  • Item 3
  • Item 2
  • Item 1
  1. Item 3
  2. Item 2
  3. Item 1
<ul class="unstyled"></ul>
<ol class="unstyled"></ol>
.unstyled

Visually Hidden

<div class="visually-hidden">visually-hidden</div>
.visually-hidden

Clearfix

<div class="clearfix">clearfix::after --> clear: both</div>
.clearfix