Prefer Bootstrap Utilities for all common utilities. Read the official Bootstrap Documentation for a full list of utilities.
However we have created custom utility classes for this template which are display below.

Text

Text utilities to quickly style the text of an element. Great to control size, color, weight, and more...

Font Size

You can set a font size to any element by using the following classes. i.e. .font-small-3

Class Value
.font-small-{value} 1 | 2 | 3
.font-medium-{value} 1 | 2 | 3 | 4 | 5
.font-large-{value} 1 | 2 | 3 | 4 | 5

Line Height

Set a line height quickly to any element by using the following classes.

Class Description
.line-height-1 To set 1 line height
.line-height-condensed To set 1.3 line height
.line-height-inherit To inherit line height

Text Transform

Set text transform like rotate to any element by using the following classes.

Class Description
.rotate-{45 | 90 | 180} To rotate text clockwise, i.e .rotate-45
.rotate-{45 | 90 | 180}-inverse To rotate text anti-clockwise, i.e .rotate-45-inverse

Heading Text Color

Class Description
.text-body-heading Sets text color to heading's (h1-h6) text color.

Border

Use additional border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Refer default Bootstrap Border classes here.

Border Width

You can set border width of all sides or any particular side to 2px or 3px. i.e .border-3 and .border-end-2.

Class Description
.border-{value}

Set all sides of an element with border width of {value}

value: {2 | 3} (in px)

.border-{direction}-{value}

Set any one side of an element with border width of {value}

direction: {top | right | bottom | left}

value: {2 | 3} (in px)

Border Radius

Set border radius such that your element becomes either round or square.

Class Description
.round Set border radius to 1.5rem
.square Set border radius to 0

Sizing

Width and height utilities for custom sizing.

Refer default Bootstrap Sizing classes here.

Height

Set height in px or % to any element by using the following classes. i.e. .height-250 and .height-80-per.

Class Description
.height-{value}

Set height to {value} px

value: {50 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800} (in px)

.height-{value}-per

Set height to {value} %

value: {5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95} (in %)

.full-height Set height to 100%

Width

Set width in px or % to any element by using the following classes. i.e. .width-250 and .width-80-per.

Class Description
.width-{value}

Set width to {value} px

value: {50 | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800} (in px)

.width-{value}-per

Set width to {value} %

value: {5 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95} (in %)

.fit Set max-width to 100%
.half-width Set width to 50%
.full-width Set width to 100%

Position

Use these shorthand utilities for quickly configuring the position of an element. Quick positioning classes are available, though they are not responsive.

Refer default Bootstrap Position classes here.

Position

Set position of any particular direction to 0. i.e. .position-right-0

Class Direction
.position-{direction}-0 top | right | bottom | left

Overflow

Use these shorthand utilities for quickly configuring how content overflows an element.

Refer default Bootstrap Overflow classes here.

Overflow

Set overflow to any element as per your needs. i.e. .overflow-y-scroll.

Class Description
.overflow-visible Set overflow to visible
.overflow-scroll Set overflow to scroll horizontally and vertically
.overflow-{direction}-scroll

Set overflow to scroll horizontally or vertically

direction: {x | y} (horizontal | vertical)

Cursor

Use these shorthand utilities for different mouse cursors on an element.

Cursor

Set cursor on any element as per your needs. i.e. .cursor-not-allowed.

Class Value
.cursor-{value} pointer | move | default | progress | not-allowed

Z-index

Use these shorthand utilities for z-index between -4 and 4.

Z-index

Set z-index on any element as per your needs. i.e. .zindex-3 and .zindex-minus-2.

Class Value
.zindex-{value} 0 | 1 | 2 | 3 | 4
.zindex-minus-{value} 1 | 2 | 3 | 4

Box Shadow

Use these shorthand utilities for different box shadows.

Box Shadow

Set box shadow on any element as per your needs. i.e. .box-shadow-5.

Class Value
.box-shadow-{value} 0 | 1 | 2 | 3 | 4 | 5 | 6 (Here 0 is box-shadow: none;)

Outline

Outline

Class Description
.outline-none Remove outline from any element

Lists

Use these shorthand utilities for list styles.

Refer default Bootstrap List classes here.

List Styles

Use list styles as per your needs. i.e. .list-style-circle.

Class Value
.list-style-{value} inside | circle | square

Table

Table

The table below illustrates useful table classes.

Class Description
.cell-fit Fit table cell width to content

Background Image

Background Image

The table below illustrates useful background images classes.

Class Description
.bg-cover Scale the background image to be as large as possible so that the background area is completely covered by the background image
.background-repeat Sets background image on repeat
.background-no-repeat Do not repeat the background image

Icon

Icon

The table below illustrates useful classes relating to icons.

Class Description
.icon-bg-circle Sets border-radius to 50% (round), text color to white and gives proper padding
.icon-left To give some margin on right side of the icon
.icon-right To give some margin on left side of the icon

Spinner

Spinner

You can make any element rotate for infinite times in both directions.

Class Description
.spinner Make your element rotate in clockwise direction
.spinner-reverse Make your element rotate in anti-clockwise direction