เลย์เอาต์กริดพื้นฐานเพื่อให้คุณคุ้นเคยกับสิ่งปลูกสร้างภายในระบบกริด Bootstrap
ในตัวอย่างเหล่านี้.themed-grid-colคลาสจะถูกเพิ่มลงในคอลัมน์เพื่อเพิ่มธีมบางส่วน นี่ไม่ใช่คลาสที่มีอยู่ใน Bootstrap โดยค่าเริ่มต้น
ระบบกริด Bootstrap มีห้าระดับ หนึ่งระดับสำหรับอุปกรณ์แต่ละช่วงที่เรารองรับ แต่ละระดับเริ่มต้นที่ขนาดวิวพอร์ตขั้นต่ำและนำไปใช้กับอุปกรณ์ที่มีขนาดใหญ่กว่าโดยอัตโนมัติ เว้นแต่จะมีการแทนที่
รับคอลัมน์ที่ มีความกว้างเท่ากันสามคอลัมน์โดยเริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ บนอุปกรณ์เคลื่อนที่ แท็บเล็ต และด้านล่าง คอลัมน์จะเรียงซ้อนกันโดยอัตโนมัติ
รับ สามคอลัมน์เริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่ที่มีความกว้างต่างกัน โปรดจำไว้ว่า คอลัมน์กริดควรรวมกันได้มากถึงสิบสองบล็อกสำหรับบล็อกแนวนอนเดียว ยิ่งไปกว่านั้น คอลัมน์ต่างๆ ก็เริ่มซ้อนกันไม่ว่าวิวพอร์ตจะเป็นอย่างไรก็ตาม
รับ สองคอลัมน์เริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่
ไม่จำเป็นต้องมีคลาสกริดสำหรับองค์ประกอบแบบเต็มความกว้าง
ตามเอกสารประกอบ การซ้อนทำได้ง่าย—เพียงแค่ใส่แถวของคอลัมน์ภายในคอลัมน์ที่มีอยู่ ซึ่งจะให้สองคอลัมน์โดยเริ่มต้นที่เดสก์ท็อปและปรับขนาดเป็นเดสก์ท็อปขนาดใหญ่โดยมีอีกสองคอลัมน์ (ความกว้างเท่ากัน) ภายในคอลัมน์ที่ใหญ่กว่า
At mobile device sizes, tablets and down, these columns and their nested columns will stack.
The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.
คลาสเพิ่มเติมที่เพิ่มใน Bootstrap v4.4 อนุญาตให้คอนเทนเนอร์ที่มีความกว้าง 100% จนถึงเบรกพอยต์เฉพาะ