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. |