Buttons

This template uses customized button (not the default provided with Bootstrap), and here they are :

Button with bordered arrow icon

Button with bordered arrow icon, such as what is visible on the home page can be obtained by adding the btn-circicon class and by using similar code as:

HTML Button - btn-arrow
<!-- Action button -->
<a class="btn btn-arrow btn-primary" href="#">
    <span class="icon">
        <span class="arrow-right"></span>
    </span>
    <span class="text">About</span>
</a>

Text only, icon only can be used here.

Underlined Button

Underlined Button, can be obtained by adding the btn-transp-arrow class and by using similar code as:

HTML Button - btn-underline
<a class="btn btn-underline btn-primary" href="#about">
    <span class="text">About Us</span>
</a>

Bordered Button

Bordered button, such as what is visible on services or subscription page can be obtained by adding the btn-outline-white class and by using similar code as:

HTML Button - btn-outline
<a class="btn btn-outline btn-primary" href="#">
    <span class="text">Details</span>
    <span class="icon">
        <span class="arrow-right"></span>
    </span>
</a>

Or to use Icons (such as ionicons or fontawesome icons) :

HTML Button - btn-outline with icon
<a class="btn btn-outline btn-primary" href="#">
<span class="text">Subscribe</span>
<span class="icon">
    <i class="ion ion-checkmark"></i>
</span>
</a>

Layout

Grid

The section Projects uses a special grid layout. It distributes items (elements with class item) accross the container depending on grid-X .
X describes the number of items per line.

It is responsive, and compatible with Bootstrap API which means, it reacts to grid-1 grid-md-4 grid-lg-4 class.

Here is the sample code used by the "projects" section which uses it.

HTML Grid
<div class="grid-1 grid-md-4 grid-lg-4">
    <!-- an item -->
    <div class="item">
      ...
    </div>
    <!-- an item -->
    <div class="item">
      ...
    </div>
</div>