ท่านสามารถทำการปรับขนาดของคอลัมน์ 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 พอดี
