30% Discount Get your Kallyas WordPress license Today for only $49! Or renew your support at $18 for extra 6 months. Shop Now

Grid Markup

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