This template uses Bootstrap UI Toolkit and framework and therefore it uses a complex but so useful grid system.

Instead of in-depth explaining here i would better suggest heading over the Bootstrap website as there are massive useful info’s about the grid system which are far better explain that i ever could.

Just some short tips:

• There are 12 columns
• there are 4 states of how is the grid applied – xs , sm , md and lg .
• You can have all 4 types of classes tied to a column eg: class=” col-xs-10 col-sm-6 col-md-4 col-lg-3 ” (this means that on large devices the column will occupy 3 columns, while on medium devices 4 columns, 6 colums on small devices and 10 colums on even smaller devices such as smartphones or phablets).
• If you just add a lg column class (eg col-lg-6), it will only occupy the #no o cols you specified (6), on large devices (1200+), while on smaller devices it won;’t have any predefined width, just 100%.
• if you add a single md column class (eg col-md-6), it will only occupy the #no o cols you specifed (6) but on medium and large devices (992+), while on smaller devices it won’t have any width, just 100%
• Grids must be inside of a .row, while a .row must be inside a .container