Helper classes

Background color helper classes

.fx-bg-primary
.fx-bg-success
.fx-bg-info
.fx-bg-warning
.fx-bg-danger
.fx-bg-black
.fx-bg-gray-darkest
.fx-bg-gray-darker
.fx-bg-gray-dark
.fx-bg-gray
.fx-bg-gray-light
.fx-bg-gray-lighter
.fx-bg-gray-lightest
.fx-bg-white

Color helper classes

.fx-text-primary
.fx-text-success
.fx-text-info
.fx-text-warning
.fx-text-danger
.fx-text-black
.fx-text-gray-darkest
.fx-text-gray-darker
.fx-text-gray-dark
.fx-text-gray
.fx-text-gray-light
.fx-text-gray-lighter
.fx-text-gray-lightest
.fx-text-white

Position helper classes

	
.fx-fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1000;
}

.fx-fixed-bottom {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 1000;
}

.fx-sticky-top {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1000;
}

Sticky header (only CSS, no JS)

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text.

Text helper classes

.fx-text-left - aligning text to left
.fx-text-center - aligning text to center
.fx-text-right - aligning text to right
.fx-text-lowercase - lowercase text
.fx-text-uppercase - uppercase text
.fx-text-capitalize - capitalize text
.fx-text-mute - mute text

Visibility helper classes

	
.fx-hide {
	display: none !important;
}

.fx-show {
	display: block !important;
}

.fx-invisible {
	visibility: hidden;
}

Margin helper classes

	
.fx-margin-all-none {
	margin: 0 !important;
}

.fx-margin-top-none {
	margin-top: 0 !important;
}

.fx-margin-right-none {
	margin-right: 0 !important;
}

.fx-margin-bottom-none {
	margin-bottom: 0 !important;
}

.fx-margin-left-none {
	margin-left: 0 !important;
}

.fx-margin-all {
	margin: 15px !important;
}

.fx-margin-top {
	margin-top: 15px !important;
}

.fx-margin-right {
	margin-right: 15px !important;
}

.fx-margin-bottom {
	margin-bottom: 15px !important;
}

.fx-margin-left {
	margin-left: 15px !important;
}

Padding helper classes

	
.fx-padding-all-none {
	padding: 0 !important;
}

.fx-padding-top-none {
	padding-top: 0 !important;
}

.fx-padding-right-none {
	padding-right: 0 !important;
}

.fx-padding-bottom-none {
	padding-bottom: 0 !important;
}

.fx-padding-left-none {
	padding-left: 0 !important;
}

.fx-padding-all {
	padding: 15px !important;
}

.fx-padding-top {
	padding-top: 15px !important;
}

.fx-padding-right {
	padding-right: 15px !important;
}

.fx-padding-bottom {
	padding-bottom: 15px !important;
}

.fx-padding-left {
	padding-left: 15px !important;
}