เวลาที่เราเขียนเว็บไซต์จะต้องมีข้อความบางอย่างที่เราต้องการให้ข้อความกอไก่อยู่ชิดซ้าย ข้อความขอไข่อยู่ชิดขวา และทั้งสองอยู่บรรทัดเดียวกัน แต่… เว็บไซต์ไม่ได้ง่ายขนาดที่จะคลิดปุ่ม align แล้วสามารถเลื่อนข้อความทั้งสองนี้ได้
ข้อความ ก.ไก่ ข้อความ ข.ไข่
ในตอนเริ่มแรกที่ใช้งาน bootstrap เราจึงทำการแบ่ง col และเลือกให้ col ฝั่งซ้ายชิดซ้าย col ฝั่งขวาชิดขวา
< div class="row"> < div class="col-md-6 float-left"> ข้อความ ก.ไก่ </ div> <!--/.col--> < div class=" col-md-6 float-right"> ข้อความ ข.ไข่ </ div> <!--/.col--> </ div> <!--/.row-->
ทำแบบถึกๆเช่นนี้มาเรื่อยๆ จนกระทั่งวันหนึ่ง… ก็ไปพบเจอโค้ด “สั้นๆ” นั่นก็คือ .pull-left และ .pull-right วิธีใช้ก็คือ
< div class="row"> < div class="col-md-12"> < div class="pull-left">ข้อความ ก.ไก่</ div> < div class="pull-right">ข้อความ ข.ไข่</ div> </ div> <!--/.col--> </ div> <!--/.row-->
นอกจากนี้ถ้าหากใช้ .pull-right ซ้ำกัน จะหมายถึง ชิดขวาของอันแรก เช่น
< div class="row"> < div class="col-md-12"> < div class="pull-left">ข้อความ ฮ.ฮูก</ div> < div class="pull-right">ข้อความ ก.ไก่</ div> < div class="pull-right">ข้อความ ข.ไข่</ div> </div> <!--/.col--> </ div> <!--/.row-->
จะได้ว่า
ข้อความ ฮ.ฮูก ข้อความ ข.ไข่ ข้อความ ก.ไก่
หมายเหตุ: < div > การพิมพ์ในบล็อคถ้าไม่เว้นวรรค โค้ดตัวอย่างจะไม่แสดง