ท่านสามารถเพิ่มเติมคอลัมน์ของ 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
