Margin

Use margin-(size) to margin an element.

.margin-xs { margin: 5px !important; }
.margin-sm { margin: 10px !important; }
.margin-md { margin: 20px !important; }
.margin-lg { margin: 30px !important; }

.margin-5 { margin: 5px !important; }
.margin-10 { margin: 10px !important; }
.margin-15 { margin: 15px !important; }
.margin-20 { margin: 20px !important; }
.margin-25 { margin: 25px !important; }
.margin-30 { margin: 30px !important; }
.margin-35 { margin: 35px !important; }
.margin-40 { margin: 40px !important; }
.margin-45 { margin: 45px !important; }
.margin-50 { margin: 50px !important; }
.margin-55 { margin: 55px !important; }
.margin-60 { margin: 60px !important; }
.margin-5-10 { margin: 5px 10px !important; }
.margin-5-15 { margin: 5px 15px !important; }
.margin-5-20 { margin: 5px 20px !important; }
.margin-10-15 { margin: 10px 15px !important; }
.margin-10-20 { margin: 10px 20px !important; }
.margin-15-20 { margin: 15px 20px !important; }

Margin Vertical

Use margin-(alignment)-(size) to margin vertical an element.

.margin-top-5 {  margin-top: 5px !important; }
.margin-top-10 {  margin-top: 10px !important; }
.margin-top-15 {  margin-top: 15px !important; }
.margin-top-20 {  margin-top: 20px !important; }
.margin-top-25 {  margin-top: 25px !important; }
.margin-top-30 {  margin-top: 30px !important; }
.margin-top-35 {  margin-top: 35px !important; }
.margin-top-40 {  margin-top: 40px !important; }
.margin-top-45 {  margin-top: 45px !important; }
.margin-top-50 {  margin-top: 50px !important; }
.margin-top-55 {  margin-top: 55px !important; }
.margin-top-60 {  margin-top: 60px !important; }


.margin-bottom-5 {  margin-bottom: 5px !important; }
.margin-bottom-10 {  margin-bottom: 10px !important; }
.margin-bottom-15 {  margin-bottom: 15px !important; }
.margin-bottom-20 {  margin-bottom: 20px !important; }
.margin-bottom-25 {  margin-bottom: 25px !important; }
.margin-bottom-30 {  margin-bottom: 30px !important; }
.margin-bottom-35 {  margin-bottom: 35px !important; }
.margin-bottom-40 {  margin-bottom: 40px !important; }
.margin-bottom-45 {  margin-bottom: 45px !important; }
.margin-bottom-50 {  margin-bottom: 50px !important; }
.margin-bottom-55 {  margin-bottom: 55px !important; }
.margin-bottom-60 {  margin-bottom: 60px !important; }

Margin Horizontal

Use margin-(alignment)-(size) to margin horizontal an element.

.margin-left-5 {  margin-left: 5px !important; }
.margin-left-10 {  margin-left: 10px !important; }
.margin-left-15 {  margin-left: 15px !important; }
.margin-left-20 {  margin-left: 20px !important; }
.margin-left-25 {  margin-left: 25px !important; }
.margin-left-30 {  margin-left: 30px !important; }
.margin-left-35 {  margin-left: 35px !important; }
.margin-left-40 {  margin-left: 40px !important; }
.margin-left-45 {  margin-left: 45px !important; }
.margin-left-50 {  margin-left: 50px !important; }
.margin-left-55 {  margin-left: 55px !important; }
.margin-left-60 {  margin-left: 60px !important; }

.margin-right-5 {  margin-right: 5px !important; }
.margin-right-10 {  margin-right: 10px !important; }
.margin-right-15 {  margin-right: 15px !important; }
.margin-right-20 {  margin-right: 20px !important; }
.margin-right-25 {  margin-right: 25px !important; }
.margin-right-30 {  margin-right: 30px !important; }
.margin-right-35 {  margin-right: 35px !important; }
.margin-right-40 {  margin-right: 40px !important; }
.margin-right-45 {  margin-right: 45px !important; }
.margin-right-50 {  margin-right: 50px !important; }
.margin-right-55 {  margin-right: 55px !important; }
.margin-right-60 {  margin-right: 60px !important; }

Reset classes

With the template helpers so easily to create your style.

.no-display {  display: none  !important; }
.pull-none {  float: none  !important; }
.no-float {  float: none  !important; }
.no-border {  border: 0  !important; }
.no-border-top {  border-top: 0  !important; }
.no-border-bottom {  border-bottom: 0  !important; }
.no-border-left {  border-left: 0  !important; }
.no-border-right {  border-right: 0  !important; }
.no-shadow {  box-shadow: none !important; -webkit-box-shadow: none  !important; }
.no-radius {  border-radius: 0 !important; -webkit-border-radius: 0  !important; }
.no-padding {  padding: 0  !important; }
.no-padding-top {  padding-top: 0  !important; }
.no-padding-bottom {  padding-bottom: 0  !important; }
.no-padding-left {  padding-left: 0  !important; }
.no-padding-right {  padding-right: 0  !important; }
.no-margin {  margin: 0  !important; }
.no-margin-top {  margin-top: 0  !important; }
.no-margin-bottom {  margin-bottom: 0  !important; }
.no-margin-left {  margin-left: 0  !important; }
.no-margin-right {  margin-right: 0  !important; }
.bg-transparent { background-color: transparent !important; }
.italic { font-style: italic !important; }
.normal { font-weight: normal !important; }
.bold { font-weight: bold !important; }
.line-height-auto { line-height: initial !important; }
.width-auto {  width: auto  !important; }
.height-auto {  height: auto  !important; }
.max-width-100 {  max-width: 100%  !important; }
.max-width-initial {  max-width: initial  !important; }

Font Style

Font Weight

Use font-weight-(number) to set a font weight.

.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }

Font Size

Use font-size-(number) to increase your font size.

.font-size-10 { font-size: 10px !important; }
.font-size-11 { font-size: 11px !important; }
.font-size-12 { font-size: 12px !important; }
.font-size-14 { font-size: 14px !important; }
.font-size-16 { font-size: 16px !important; }
.font-size-18 { font-size: 18px !important; }
.font-size-20 { font-size: 20px !important; }
.font-size-22 { font-size: 22px !important; }
.font-size-24 { font-size: 24px !important; }
.font-size-26 { font-size: 26px !important; }
.font-size-28 { font-size: 28px !important; }
.font-size-30 { font-size: 30px !important; }
.font-size-32 { font-size: 32px !important; }
.font-size-34 { font-size: 34px !important; }
.font-size-36 { font-size: 36px !important; }
.font-size-38 { font-size: 38px !important; }
.font-size-40 { font-size: 40px !important; }
.font-size-42 { font-size: 42px !important; }
.font-size-44 { font-size: 44px !important; }
.font-size-46 { font-size: 46px !important; }
.font-size-48 { font-size: 48px !important; }
.font-size-50 { font-size: 50px !important; }
.font-size-60 { font-size: 60px !important; }
.font-size-70 { font-size: 70px !important; }
.font-size-80 { font-size: 80px !important; }
.xs-size { font-size: 12px !important; }
.sm-size { font-size: 14px !important; }
.md-size { font-size: 16px !important; }
.lg-size { font-size: 18px !important; }
.extra-lg-size { font-size: 80px !important; }

Line Height

Use line-height-(number) to set line height.

.line-height-auto { line-height: initial !important; }
.line-height-10 { line-height: 10px !important; }
.line-height-11 { line-height: 11px !important; }
.line-height-12 { line-height: 12px !important; }
.line-height-13 { line-height: 13px !important; }
.line-height-14 { line-height: 14px !important; }
.line-height-15 { line-height: 15px !important; }
.line-height-16 { line-height: 16px !important; }
.line-height-17 { line-height: 17px !important; }
.line-height-18 { line-height: 18px !important; }
.line-height-19 { line-height: 19px !important; }
.line-height-20 { line-height: 20px !important; }

Vertical Align

Use vertocal-(alignment) to set vertical align.

.vertical-middle { vertical-align: middle !important; }
.vertical-top { vertical-align: top !important;}
.vertical-bottom { vertical-align: bottom !important; }

Display helpers

Use display-(position) to set display option.

.display-table { display: table !important; }
.display-table-cell {  display: table-cell !important; }
.display-inline-block { display: inline-block !important; }
.display-block { display: block !important; }
.display-none { display: none !important; }

Position helpers

Use position to set position.

.absolute { position: absolute; }
.relative { position: relative; }
.fixed { position: fixed; }
.position-bottom { bottom: 0; }
.position-top { top: 0; }
.position-right { right: 0; left: auto; }
.position-left { left: 0; right: auto; }

Border Classes

Use border-alignment-(number) to set border size.

.border-1 { border-width: 1px !important; border-style: solid; }
.border-2 { border-width: 2px !important; border-style: solid; }
.border-3 { border-width: 3px !important; border-style: solid; }
.border-4 { border-width: 4px !important; border-style: solid; }
.border-5 { border-width: 5px !important; border-style: solid; }

.border-left-1 { border-left: 1px solid transparent; }
.border-left-2 { border-left: 2px solid transparent; }
.border-left-3 { border-left: 3px solid transparent; }
.border-left-4 { border-left: 4px solid transparent; }
.border-left-5 { border-left: 5px solid transparent; }

.border-right-1 { border-right: 1px solid transparent; }
.border-right-2 { border-right: 2px solid transparent; }
.border-right-3 { border-right: 3px solid transparent; }
.border-right-4 { border-right: 4px solid transparent; }
.border-right-5 { border-right: 5px solid transparent; }

.border-bottom-1 { border-bottom: 1px solid transparent; }
.border-bottom-2 { border-bottom: 2px solid transparent; }
.border-bottom-3 { border-bottom: 3px solid transparent; }
.border-bottom-4 { border-bottom: 4px solid transparent; }
.border-bottom-5 { border-bottom: 5px solid transparent; }

.border-top-1 { border-top: 1px solid transparent; }
.border-top-2 { border-top: 2px solid transparent; }
.border-top-3 { border-top: 3px solid transparent; }
.border-top-4 { border-top: 4px solid transparent; }
.border-top-5 { border-top: 5px solid transparent; }

.border-dotted { border-style: dotted !important; }
.border-dashed { border-style: dashed !important; }

Border Radius

Use border-radius-(size) to set border size.

.border-radius-2 { border-radius: 2px!important; -webkit-border-radius: 2px!important; }
.border-radius-3 { border-radius: 3px!important; -webkit-border-radius: 3px!important; }
.border-radius-4 { border-radius: 4px!important; -webkit-border-radius: 4px!important; }
.border-radius-5 { border-radius: 5px!important; -webkit-border-radius: 5px!important; }
.border-radius-10 { border-radius: 10px!important; -webkit-border-radius: 10px!important; }
.border-radius-15 { border-radius: 15px!important; -webkit-border-radius: 15px!important; }
.border-radius-20 { border-radius: 20px!important; -webkit-border-radius: 20px!important; }
.border-radius-25 { border-radius: 25px!important; -webkit-border-radius: 25px!important; }
.border-radius-30 { border-radius: 30px!important; -webkit-border-radius: 30px!important; }

Width

Use (size)-width to set width for an element.

.xs-width { width: 10% !important; }
.sm-width { width: 25% !important; }
.md-width { width: 50% !important; }
.lg-width { width: 75% !important; }
.fl-width { width: 100% !important; }
.max-width-100 { max-width: 100% !important; }
.max-width-initial { max-width: initial !important; }

Height

Use height-(size) to set height for an element.

.height-auto { height: auto !important; }
.height-full { height: 100% !important; }
.height-5 { height: 5px !important; }
.height-10 { height: 10px !important; }
.height-15 { height: 15px !important; }
.height-20 { height: 20px !important; }
.height-25 { height: 25px !important; }
.height-30 { height: 30px !important; }
.height-35 { height: 35px !important; }
.height-40 { height: 40px !important; }
.height-45 { height: 45px !important; }
.height-50 { height: 55px !important; }
.height-60 { height: 60px !important; }
.height-65 { height: 65px !important; }
.height-70 { height: 70px !important; }
.height-75 { height: 75px !important; }
.height-80 { height: 80px !important; }
.height-85 { height: 85px !important; }
.height-90 { height: 70px !important; }
.height-95 { height: 95px !important; }
.height-100 { height: 70px !important; }
.height-110 { height: 110px !important; }
.height-120 { height: 120px !important; }
.height-130 { height: 130px !important; }
.height-140 { height: 140px !important; }
.height-150 { height: 150px !important; }
.height-160 { height: 160px !important; }
.height-170 { height: 170px !important; }
.height-180 { height: 180px !important; }
.height-190 { height: 190px !important; }
.height-200 { height: 200px !important; }
.height-210 { height: 210px !important; }
.height-220 { height: 220px !important; }
.height-230 { height: 230px !important; }
.height-240 { height: 240px !important; }
.height-250 { height: 250px !important; }
.height-260 { height: 260px !important; }
.height-270 { height: 270px !important; }
.height-280 { height: 280px !important; }
.height-290 { height: 290px !important; }
.height-300 { height: 300px !important; }
.height-310 { height: 310px !important; }
.height-320 { height: 320px !important; }
.height-330 { height: 330px !important; }
.height-340 { height: 340px !important; }
.height-350 { height: 350px !important; }
.height-360 { height: 360px !important; }
.height-370 { height: 370px !important; }
.height-380 { height: 380px !important; }
.height-390 { height: 390px !important; }
.height-400 { height: 400px !important; }
.height-410 { height: 410px !important; }
.height-420 { height: 420px !important; }
.height-430 { height: 430px !important; }
.height-440 { height: 440px !important; }
.height-450 { height: 450px !important; }
.height-460 { height: 460px !important; }
.height-470 { height: 470px !important; }
.height-480 { height: 480px !important; }
.height-490 { height: 490px !important; }
.height-500 { height: 500px !important; }

Colors

Use bg-grey-(number) to set grey background for section or etc.

.bg-grey-50 { background-color: #fafafa !important;}
.bg-grey-100 { background-color: #f5f5f5 !important; }
.bg-grey-200 { background-color: #eeeeee !important; }
.bg-grey-300 { background-color: #e0e0e0 !important; }
.bg-grey-400 { background-color: #bdbdbd !important; }
.bg-grey-500 { background-color: #9e9e9e !important; }
.bg-grey-600 { background-color: #757575 !important; }
.bg-grey-700 { background-color: #616161 !important; }
.bg-grey-800 { background-color: #424242 !important; }
.bg-grey-900 { background-color: #212121 !important; }
.bg-white { background-color: #ffffff !important; }
.bg-black { background-color: #000000 !important; }
.bg-transparent { background-color: transparent !important; }

Border Colors

Use border-grey-(number) to set grey border for section or etc.

.border-grey-50 { border-color: #fafafa !important; }
.border-grey-100 { border-color: #f5f5f5 !important; }
.border-grey-200 { border-color: #eeeeee !important; }
.border-grey-300 { border-color: #e0e0e0 !important; }
.border-grey-400 { border-color: #bdbdbd !important; }
.border-grey-500 { border-color: #9e9e9e !important; }
.border-grey-600 { border-color: #757575 !important; }
.border-grey-700 { border-color: #616161 !important; }
.border-grey-800 { border-color: #424242 !important; }
.border-grey-900 { border-color: #212121 !important; }
.border-white { border-color: #ffffff !important; }
.border-black { border-color: #000000 !important; }

Font Colors

Use grey-color-(number) to set grey color.

.color-grey-100 { color: #f5f5f5 !important; }
.color-grey-200 { color: #eeeeee !important; }
.color-grey-300 { color: #e0e0e0 !important; }
.color-grey-400 { color: #bdbdbd !important; }
.color-grey-500 { color: #9e9e9e !important; }
.color-grey-600 { color: #757575 !important; }
.color-grey-700 { color: #616161 !important; }
.color-grey-800 { color: #424242 !important; }
.color-grey-900 { color: #212121 !important; }
.color-white { color: #ffffff !important; }
.color-black { color: #000000 !important; }

Responsive Helpers

Laptop

Use responsive helpers on laptop device

.no-padding-md-lg { padding: 0 !important; }
.no-margin-md-lg { margin: 0 !important; }
.no-margin-top-md { margin-top: 0 !important;}
.no-margin-bottom-md { margin-bottom: 0 !important; }
.padding-md-lg-15 { padding: 15px !important; }

Tablet

Use responsive helpers on tablet device

.no-padding-sm-lg { padding: 0 !important; }
.hidden-sm-lg { display: none !important; }
.no-margin-sm-lg { margin: 0 !important; }
.no-margin-top-sm-lg { margin-top: 0 !important; }
.no-margin-bottom-sm-lg { margin-bottom: 0 !important; }
.no-border-left-sm-lg { border-left: 0 !important; }
.no-border-right-sm-lg { border-right: 0 !important; }
.padding-right-sm-lg-15 { padding-right: 15px !important; }
.margin-top-sm-lg-15 { margin-top: 15px !important; }
.padding-sm-lg-15 { padding: 15px !important; }

Ipad

Use responsive helpers on ipad device

.no-padding-sm { padding: 0 !important;}
.no-padding-top-sm { padding-top: 0 !important;}
.no-padding-bottom-sm { padding-bottom: 0 !important; }
.no-margin-sm { margin: 0 !important; }
.no-margin-top-sm { margin-top: 0 !important; }
.no-margin-bottom-sm { margin-bottom: 0 !important; }
.margin-top-sm-15 { margin-top: 15px !important; }
.margin-bottom-sm-15 { margin-top: 15px !important; }
.padding-sm-15 { padding: 15px !important; }
.padding-right-sm-15 { padding-right: 15px !important; }
.full-width-sm { width: 100% !important; }

Mobile

Use responsive helpers on mobile device

.no-padding-xs { padding: 0 !important; }
.no-padding-bottom-xs { padding-bottom: 0 !important; }
.no-margin-xs { margin: 0 !important; }
.no-margin-top-xs { margin-top: 0 !important; }
.no-margin-bottom-xs { margin-bottom: 0 !important; }
.margin-top-xs-15 { margin-top: 15px !important; }
.margin-bottom-xs-15 { margin-bottom: 15px !important; }
.padding-xs-15 { padding: 15px !important; }
.full-width-xs { width: 100% !important; }
.no-radius-xs { border-radius: 0 !important; -webkit-border-radius: 0 !important; }