ท่านสามารถเพิ่มเติมคอลัมน์ของ Module ได้ง่ายๆ โดยต้องเพิ่มในแต่ละ Div Set เพื่อให้มีตำแหน่งรองรับ Module นั้นๆ โดยเริ่มต้น

 

 <div id="top" class="container-fluid">
  <div id="top-body" class="container">
      <div id="logo" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <jdoc:include type="modules" name="logo" style="xhtml" />
      </div>
      <div id="menu" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <jdoc:include type="modules" name="menu" style="xhtml" />
      </div>
      <div id="social" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
         <jdoc:include type="modules" name="social" style="xhtml" />
      </div>
   </div>
</div>

ในตัวอย่างจะเห็นว่ามีคอลัมน์สำหรับ Module อยู่ 3 Div ได้แก่ logo , menu และ social ถ้าเราต้องการเพิ่ม เราก็เพียง COPY ชุดคอลัมน์ใด ชุดหนึ่งแล้ววางต่อท้ายชุดคอลัมน์ล่าสุด โดยต้องเปลี่ยนชื่อ ID ให้ต่างกัน และกำหนด class รวมในส่วน lg และ md ใหม่ ให้ไม่เกิน 12

 

<div id="top" class="container-fluid">
   <div id="top-body" class="container">
      <div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
         <jdoc:include type="modules" name="logo" style="xhtml" />
      </div>
      <div id="menu" class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <jdoc:include type="modules" name="menu" style="xhtml" />
      </div>
      <div id="social" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
         <jdoc:include type="modules" name="social" style="xhtml" />
      </div>
      <div id="phone" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
         <jdoc:include type="modules" name="phone" style="xhtml" />
      </div>
   </div>
</div>

 

ตอนนี้เราได้เพิ่มในส่วนคอลัมน์ Div ที่ชื่อ ID เป็น phone และก็ปรับในส่วน class ของ md และ lg ให้รวมกันไม่เกิน 12