ท่านสามารถทำการปรับขนาดของคอลัมน์ Module ในแต่ละตำแหน่งได้ง่ายๆ โดยขอเน้นว่า ให้ปรับในขนาดของ lg ซึ่งเป็นขนาดสำหรับ PC หรือ ถ้าต้องการขนาดในส่วน tablets (แท็บเล็ต) แนวนอน ให้ปรับในส่วน md เท่านั้น ส่วนขนาดที่เล็กกว่าเช่น xs หรือ sm ไม่จำเป็นต้องปรับ เพราะ เทมเพลตที่เราออกแบบมานั้นกำหนด CSS สำหรับ Mobile ไว้ให้อยู่แล้ว

 

<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>

 

จากตัวอย่าง ท่านจะเห็นว่า ใน class ที่ส่วน lg นั้นกำหนดไว้ที่ col-lg-3 เราสามารถแก้ไขตัวเลขเพื่อปรับขนาดได้ อาทิเช่น ปรับให้เป็น col-lg-5

 

<div id="logo" class="col-xs-12 col-sm-12 col-md-3 col-lg-5">
     <jdoc:include type="modules" name="logo" style="xhtml" />
</div>

 

หรือถ้าจะปรับ ทั้ง PC และส่วน tablets (แท็บเล็ต) แนวนอน ก็จะได้ดังนี้

 

<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 Set มีการใช้หลาย Module เราก็ต้องปรับให้แต่ละ Module รวมกันแล้ว ไม่เกิน 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-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>

 

จะเห็นว่า class ในส่วน md และ lg ของแต่ละ Module เมื่อรวมกันแล้ว จะได้ 12 พอดี