MOSS-UI

Moss

Helper

Toggling content

.visible

CONTENT

.d-none

.invisible

CONTENT

Float

float-right

float-left

Colors

text-default

bg-default

text-primary

bg-primary

text-secondary

bg-secondary

text-info

bg-info

text-success

bg-success

text-warning

bg-warning

text-danger

bg-danger

text-light

bg-light

text-dark

bg-dark

text-shade

bg-shade

text-link

bg-link

text-black-50

bg-body

Shadow

shadow-sm

shadow

shadow-lg

shadow-inset-sm

shadow-inset

shadow-inset-lg

Rounded

rounded-sm

rounded

rounded-lg

rounded-circle

rounded-pill

rounded-0

rounded-top

rounded-right

rounded-bottom

rounded-left

Sizing

Helper classes for specifying width or height of element.

Width

Width 25%

Width 50%

Width 75%

Width 100%

Height

Height 25%

Height 50%

Height 75%

Height 100%

Spacing

Helper classes for specifying margin or padding spacing to element.

Margin

margin-1

margin-2

margin-3

margin-4

margin-5

Negative Margin

mt-n1

mt-n3

mt-n5

Padding

padding-1

padding-2

padding-3

padding-4

padding-5

Text

Font Family

font-base
font-accent
font-cursive
font-monospace

Font Weight

font-weight-lighter
font-weight-light
font-weight-normal
font-weight-bold
font-weight-bolder

Font Style

font-italic

Alignment

text-left

text-center

text-right

Transformation

Example: hEllo, WoRlD!

text-lowercase: hEllo, WoRlD!
text-uppercase: hEllo, WoRlD!
text-capitalize: hEllo, WoRlD!

Miscellaneous

help: This is help comments.

text-truncate: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Flex

Flexbox container

Inline flexbox