Utilities

Backgrounds

Primary

.bg-primary-lightest
.bg-primary-light
.bg-primary
.bg-primary-dark

Secondary

.bg-secondary-lightest
.bg-secondary-light
.bg-secondary
.bg-secondary-dark

Error

.bg-error-lightest
.bg-error-light
.bg-error
.bg-error-dark

Success

.bg-success-lightest
.bg-success-light
.bg-success
.bg-success-dark

Neutral

.bg-transparent
.bg-grey-lightest
.bg-grey-light
.bg-grey
.bg-grey-dark
.bg-black

White

.bg-white

Borders

Additive

.border
.border-top
.border-right
.border-bottom
.border-left

Subtractive

.border-0
.border-top-0
.border-right-0
.border-bottom-0
.border-left-0

Sizes

.border-1
.border-2
.border-5

Primary

.border-primary-lightest
.border-primary-light
.border-primary
.border-primary-dark

Secondary

.border-secondary-lightest
.border-secondary-light
.border-secondary
.border-secondary-dark

Error

.border-error-lightest
.border-error-light
.border-error
.border-error-dark

Success

.border-success-lightest
.border-success-light
.border-success
.border-success-dark

Neutral

.border-transparent
.border-grey-lightest
.border-grey-light
.border-grey
.border-grey-dark
.border-black

White

.border-white

Colors

Primary

.text-primary-lightest
.text-primary-light
.text-primary
.text-primary-dark

Secondary

.text-secondary-lightest
.text-secondary-light
.text-secondary
.text-secondary-dark

Error

.text-error-lightest
.text-error-light
.text-error
.text-error-dark

Success

.text-success-lightest
.text-success-light
.text-success
.text-success-dark

Neutral

.text-grey-lightest
.text-grey-light
.text-grey
.text-grey-dark
.text-black

White

.text-white

Display

.{sm/md/lg}:d-{none/inline/inline-block/block/inline-flex/flex}
Screen sizesClass
Hidden on all.d-none
Visible only for sm and plus.d-none .sm:d-block
Visible only for md and plus.d-none .md:d-block
Visible only for lg and plus.d-none .lg:d-block

Position

.{sm/md/lg}:pos-{static/relative}
Screen sizesClass
Static on all.pos-static or nothing
Relative on all.pos-relative
Relative only for sm and plus.sm:pos-relative
Relative only for md and plus.md:pos-relative
Relative only for lg and plus.lg:pos-relative

Radius

Radius

.radius

Rounded

.rounded

Shadow

.shadow .shadow-lg

No shadow

Regular shadow

Larger shadow

Spacing

.{sm/md/lg}:{p/m/nm}{t/r/b/l/x/y}-{a/0/0.25/0.33/0.5/2/3/4/5}

Examples

.p
.pl-0.5
.py-2
.md:px-3
.nml
.mx-a

Text

Alignment

.{sm/md/lg}:text-{left/center/right}
.text-left
.text-center
.text-right
This text is centered only for medium (and plus) screen

Sizes

.fs-{fluid/1/2/3/4/5/smaller/larger}

.fs-smaller

.fs-larger

.fs-1

.fs-2

.fs-3 (default: 1rem)

.fs-4

.fs-5

.fs-fluid

Word break

.text-break

Lorem ipsum dolor sit, wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww elit. Fugit, repellendus, deserunt ?

Reset color

.text-reset

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit, repellendus, deserunt ?

Text transform

.caps

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit, repellendus, deserunt ?

Font weight & italics

.fw-{regular/semibold/bold}.fst-i

.fw-regular

.fw-semibold

.fw-bold

.fst-i

Line height

.{lh}-{1/sm/base/lg}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, aspernatur nihil vitae ea, in ducimus commodi fugiat perferendis iusto laborum, porro! Quas molestiae est enim sint, expedita, illo quod a. Sequi, id omnis pariatur. Molestias modi repudiandae incidunt eveniet veniam? Sapiente neque consequuntur iusto alias, vero consectetur ipsum quasi illo, provident. Nostrum a repellendus sapiente doloremque, adipisci cum ipsa ad!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, aspernatur nihil vitae ea, in ducimus commodi fugiat perferendis iusto laborum, porro! Quas molestiae est enim sint, expedita, illo quod a. Sequi, id omnis pariatur. Molestias modi repudiandae incidunt eveniet veniam? Sapiente neque consequuntur iusto alias, vero consectetur ipsum quasi illo, provident. Nostrum a repellendus sapiente doloremque, adipisci cum ipsa ad!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, aspernatur nihil vitae ea, in ducimus commodi fugiat perferendis iusto laborum, porro! Quas molestiae est enim sint, expedita, illo quod a. Sequi, id omnis pariatur. Molestias modi repudiandae incidunt eveniet veniam? Sapiente neque consequuntur iusto alias, vero consectetur ipsum quasi illo, provident. Nostrum a repellendus sapiente doloremque, adipisci cum ipsa ad!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, aspernatur nihil vitae ea, in ducimus commodi fugiat perferendis iusto laborum, porro! Quas molestiae est enim sint, expedita, illo quod a. Sequi, id omnis pariatur. Molestias modi repudiandae incidunt eveniet veniam? Sapiente neque consequuntur iusto alias, vero consectetur ipsum quasi illo, provident. Nostrum a repellendus sapiente doloremque, adipisci cum ipsa ad!

Text decoration

.text-underline .text-decoration-none

This text has a line underneath it.

This link has its text decoration removed.

Serif font

.text-serif

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Text truncation

.text-truncate

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, aspernatur nihil vitae ea, in ducimus commodi fugiat perferendis iusto laborum, porro! Quas molestiae est enim sint, expedita, illo quod a. Sequi, id omnis pariatur. Molestias modi repudiandae incidunt eveniet veniam? Sapiente neque consequuntur iusto alias, vero consectetur ipsum quasi illo, provident. Nostrum a repellendus sapiente doloremque, adipisci cum ipsa ad!