SECTION MAIN TEMPLATE

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row">SECTION CONTENT CODE</div> </div> </section> GOOD TO KNOW

A FULL TEXT LAYOUT

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"><div class="col-md-12">FULL TEXT LAYOUT CONTENT</div></div> </div> </section>

TWO COLUMN LAYOUT

Example-1

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-4">FIRST COLUMN LAYOUT CONTENT</div> <div class="col-md-8">SECOND COLUMN LAYOUT CONTENT</div> </div> </div> </section>

Example-2

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-5">FIRST COLUMN LAYOUT CONTENT</div> <div class="col-md-7">SECOND COLUMN LAYOUT CONTENT</div> </div> </div> </section>

Example-3

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-6">FIRST COLUMN LAYOUT CONTENT</div> <div class="col-md-6">SECOND COLUMN LAYOUT CONTENT</div> </div> </div> </section>

THREE COLUMN LAYOUT

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-4">FIRST COLUMN LAYOUT CONTENT</div> <div class="col-md-4">SECOND COLUMN LAYOUT CONTENT</div> <div class="col-md-4">THIRD COLUMN LAYOUT CONTENT</div> </div> </div> </section>

CENTRE ALIGNMENT LAYOUT | class="col-md-offset-xxx"

Example-1

6 Column Content, 3 Column offset Left, 3 Column offset Right, working with 12 Column Layout

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3">LAYOUT CONTENT</div> </div> </div> </section>

Example-2

8 Column Content, 2 Column offset Left, 2 Column offset Right, working with 12 Column Layout

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2">LAYOUT CONTENT</div> </div> </div> </section>

Example-3

10 Column Content, 1 Column offset Left, 1 Column offset Right, working with 12 Column Layout

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1">LAYOUT CONTENT</div> </div> </div> </section>

ADD IMAGE INTO CONTENT

Code

<div class="imgContainer"><div class="screen"></div></div>

Example

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="imgContainer"><div class="screen"></div></div> </div> </div> </div> </section>

IMAGE SIZE | class="img-small" / class="img-big"

Example

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-6 img-small">IMAGE with 25%</div> <div class="col-md-6 img-big">IMAGE with 50%</div> </div> </div> </section>

CONTENT CENTER VERTICALLY | class="section-content-inner" / class="section-content-inner-img"

Example-1

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-12 section-content-inner">LAYOUT CONTENT</div> </div> </div> </section>

Example-2

<section id="SECTION ID" class="section1"> <div class="container"> <div class="row"> <div class="col-md-6 section-content-inner">FIRST COLUMN CONTENT</div> <div class="col-md-6 section-content-inner-img">SECOND COLUMN IMAGE</div> </div> </div> </section>

TEXT ALIGNMENTS

<section id="SECTION ID" class="section1 text-left"></section> <section id="SECTION ID" class="section1 text-center"></section> <section id="SECTION ID" class="section1 text-right"></section>

TEXT SHADOW

<div id="DIV ID" class="text-shadow"></div>

SHADOW

<div id="DIV ID" class="shadow"></div>

MARGIN TOP

for example mt50 means margin-top:50px

<div id="DIV ID" class="mt20"></div> <div id="DIV ID" class="mt30"></div> <div id="DIV ID" class="mt40"></div> <div id="DIV ID" class="mt50"></div> <div id="DIV ID" class="mt100"></div> <div id="DIV ID" class="mt200"></div>

USE NHITRON™ HIGHLIGHT COLOR

<b>WHY NHITRON™?</b>

Rendering Result

WHY NHITRON™?

BUTTON WITH HIGHLIGHT COLOR

Example-1 | Internal link to Template Section | Align Button to Right

<p class="btn-h50"> <a href="#info" class="btn_right btn-outline btn-xl page-scroll"> MORE ABOUT NHITRON™ </a> </p>

Example-2 | Internal link to Template Section | Align Button to Left

<a href="#info" class="btn_left btn-outline btn-xl page-scroll"> MORE ABOUT NHITRON™ </a>

Example-3 | External link

<a href="#URL ADDRESS" target="_blank" class="btn_right btn-outline btn-xl"> MORE ABOUT NHITRON™ </a>

AWESOME FONTS

<span class="fa fa-youtube"></span>

Rendering Result

more Infos

YOUTUBE VIDEO PLAYER

<div class="videoContainer"> <iframe src="https://www.youtube.com/embed/videoseries?list=PLbJvQwPVd1CNVBdUK1WGwijTjbqozylDA" allowfullscreen="" width="600" height="345" frameborder="0"></iframe> </div>

Rendering Result

GOOGLE MAP

<div class="col-md-xx mapConatiner"> <div id="map" class="gmap shadow"> </div> </div>

Rendering Result