• ติดตั้ง chrome extension ชื่อ bootstrap grid ช่วยในการออกแบบ layout และ grid https://chrome.google.com/webstore/detail/bootstrap-grid/gmoboekiodfcajledjijioecfimliddo

Container

layoutทั้งหมดจะต้องเริ่มจาก container เสมอ

<div class="container">
  <!-- Content here -->
</div>

เป็นการวาง layout ในหน้าจอ content จะอยู่ตรงกลางจอเสมอ ถ้าต้องการให้ยืด content จนสุดขอบ ใช้container-fluid

<div class="container-fluid">
  ...
</div>

ดูเพิ่มเติมเกี่ยวกับ layout และ container ได้ที่ https://getbootstrap.com/docs/4.0/layout/overview/

Grid

เมื่อมี container แล้ว ลำดับต่อมาก็มาดูเรื่อง Grid โดย Grid ใน Bootstrap จะประกอบไปด้วย row และ col

grid ใน bootstrap จะเป็นการแบ่งพื้นที่แสดงผลออกเป็น 12 column เท่าๆกัน ทำให้จัดสรรพื้นที่แสดงผลได้ง่ายขึ้น

ใน bootstrap4 ไม่จำเป็นต้องระบุขนาดหน้าจอที่ต้องการอีกต่อไป สามารถกำหนดให้ทำการคำนวณความกว้างของ column ให้เราแบบอัตโนมัติได้เลย

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ศึกษาเพิ่มเติม https://getbootstrap.com/docs/4.0/layout/grid/