Helper Classes

Set of predefined classes that you can use to create quick style to element.

Margin

Class Name Preview Description
.m-10
BOX
Margin 10px
.m-20
BOX
Margin 20px
.m-t-0
BOX
No margin top
.m-t-10
BOX
Margin top 10px
.m-t-20
BOX
Margin top 20px
.m-b-0
BOX
Margin bottom 0
.m-b-10
BOX
Margin bottom 10px
.m-b-20
BOX
Margin bottom 20px
.m-l-0
BOX
Margin left 0
.m-l-10
BOX
Margin left 10px
.m-l-20
BOX
Margin left 20px
.m-r-0
BOX
Margin right 0
.m-r-10
BOX
Margin right 10px
.m-r-20
BOX
Margin right 20px

Padding

Class Name Preview Description
.p-10
BOX
Padding 10px
.p-20
BOX
Padding 20px
.p-t-0
BOX
No padding top
.p-t-10
BOX
Padding top 10px
.p-t-20
BOX
Padding top 20px
.p-b-0
BOX
Padding bottom 0
.p-b-10
BOX
Padding bottom 10px
.p-b-20
BOX
Padding bottom 20px
.p-l-0
BOX
Padding left 0
.p-l-10
BOX
Padding left 10px
.p-l-20
BOX
Padding left 20px
.p-r-0
BOX
Padding right 0
.p-r-10
BOX
Padding right 10px
.p-r-20
BOX
Padding right 20px

Borders

Class Name Preview Description
.border
BOX
Border
.no-border
BOX
No Border
.border-top
BOX
Border top
.border-bottom
BOX
Border bottom
.border-left
BOX
Border left
.border-right
BOX
Border right
.border-hor
BOX
Border hor
.border-ver
BOX
Border ver

Images

Class Name Preview Description
.img-circle Image Image Circle
.img-rounded Image Image Rounded
.img-thumbnail Image Image Thumbnail
.img-sm Image Image Small
.img-md Image Image Medium
.img-lg Image Image Large

Text

Class Name Preview Description
.f-10

Your Text

Font size 10
.f-12

Your Text

Font size 12
.f-14

Your Text

Font size 14
.f-16

Your Text

Font size 16
.f-18

Your Text

Font size 18
.f-20

Your Text

Font size 20
.f-24

Your Text

Font size 24
.f-32

Your Text

Font size 32
.bold

Your Text

Bold
.t-center

Your Text

Text center
.t-left

Your Text

Text left
.t-right

Your Text

Text right
.t-right

Your Text is too long for the container so it will be cut to preserv your CSS.

Text ellipsis
.line-through

Your Text.

Line Through
.text-sm

Your Text.

Text Small
.text-2x

Your Text.

Text bigger
.text-3x

Your Text.

Text Very bigger

Text Colors

Class Name Preview Description
.c-primary

Your Text Color

Color primary
.c-red

Your Text Color

Color red
.c-blue

Your Text Color

Color blue
.c-purple

Your Text Color

Color purple
.c-brown

Your Text Color

Color brown
.c-orange

Your Text Color

Color orange
.c-green

Your Text Color

Color green
.c-gray

Your Text Color

Color gray
.c-yellow

Your Text Color

Color yellow
.c-light

Your Text Color

Color light
.c-gray-light

Your Text Color

Color gray light
.c-white

Your Text Color

Color white

Background Colors

Class Name Preview Description
.bg-primary
BOX
Background primary
.bg-blue
BOX
Background blue
.bg-aero
BOX
Background aero
.bg-yellow
BOX
Background yellow
.bg-orange
BOX
Background orange
.bg-red
BOX
Background red
.bg-purple
BOX
Background purple
.bg-pink
BOX
Background pink
.bg-green
BOX
Background green
.bg-white
BOX
Background white
.bg-light
BOX
Background light
.bg-dark
BOX
Background dark

Border Radius

Class Name Preview Description
.bd-0
BOX
No border radius
.bd-3
BOX
border radius 3px
.bd-6
BOX
border radius 6px
.bd-9
BOX
border radius 9px
.bd-full
BOX
border radius 50%