Helper Class

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Page section padding

You can add this helper class to set section padding top 80px and padding bottom 80px.
Add page-section-ptb class in section tag. See example below:

 

<section class="... page-section-ptb">
  [YOUR CONTENT]
</section>

 

Note Use this helper class to maintain all page section spacing. You can also use page-section-pt for only padding top and page-section-pb for only padding bottom.

Text color

You can use color in the Text. simply add .text-white ( or any color you want) class where you want to use. See example below:

 

<div class="text-white">  
  [YOUR TEXT CONTENT]
</div>

 

Note We include 4 color helper class in our template text-yellow, text-white, text-black and text-gray. you can add unlimited color class according to your needs.

Background overlay

You can add this .bg-overlay-black-10 class to any element in your HTML code to apply overly color on any image or any section. See example below:

 

<div class="bg-overlay-black-10">
  [YOUR CONTENT]
</div>

 

Here are some predefined overlay classes you can use:

Class Description Class Description
.bg-overlay-black-10 which means apply black color overlay with 0.10 overlay .bg-overlay-black-20 which means apply black color overlay with 0.20 overlay
.bg-overlay-black-30 which means apply black color overlay with 0.30 overlay .bg-overlay-black-40 which means apply black color overlay with 0.40 overlay
.bg-overlay-black-50 which means apply black color overlay with 0.50 overlay .bg-overlay-black-60 which means apply black color overlay with 0.60 overlay
.bg-overlay-black-70 which means apply black color overlay with 0.70 overlay .bg-overlay-black-80 which means apply black color overlay with 0.80 overlay
.bg-overlay-black-90 which means apply black color overlay with 0.90 overlay
.bg-overlay-white-10 which means apply white color overlay with 0.10 overlay .bg-overlay-white-20 which means apply white color overlay with 0.20 overlay
.bg-overlay-white-30 which means apply white color overlay with 0.30 overlay .bg-overlay-white-40 which means apply white color overlay with 0.40 overlay
.bg-overlay-white-50 which means apply white color overlay with 0.50 overlay .bg-overlay-white-60 which means apply white color overlay with 0.60 overlay
.bg-overlay-white-70 which means apply white color overlay with 0.70 overlay .bg-overlay-white-80 which means apply white color overlay with 0.80 overlay
.bg-overlay-white-90 which means apply white color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only support RGBA color values.

Text align

You can add this helper class to any element in your HTML code to set text-align

Class Description
.text-left which means text-align: left;
.text-right which means text-align: right;
.text-center which means text-align: center;

Container Classes

You can add this helper class to any element in your HTML code to remove padding from container and add padding in parallex 2 column sections.

Class Description
.nopad, .pad-0 to remove padding from the container and container fluid.
.column-10 to give 83% width to testimonial carousel.
.column-8 to give 66% width to testimonial carousel.
Suggest Edit