ใน Bootstrap 4 เราต้องกำหนดเอลิเมนต์สำหรับเป็น Container ขึ้นมา 1 เอลิเมนต์ เพื่อบรรจุเอลิเมนต์ตัวอื่น ๆ ไว้ด้านใน และใน Bootstrap จะใช้ class เป็นตัวระบุว่าอิลิเมนต์นั้นเป็น Container แบบไหน โดยจะมีอยู่ 2 แบบ คือ
- คลาส
.container
สำหรับกำหนดคอนเทนเนอร์แบบ fixed width container (ความกว้างไม่เต็มหน้าจอ มีขอบด้านข้างทั้งสองข้าง) - คลาส
.container-fluid
สำหรับกำหนดคอนเทนเนอร์แบบ full width container ความกว้างเต็มหน้าจอ
Fixed Container
เมื่อต้องการใช้งานคอนเทนเนอร์แบบ fixed-width container ให้ใช้คลาส .container ซึ่งความกว้างของคอนเทนเนอร์จะเปลี่ยนตามขนาดหน้าจอ ดังตาราง
Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
max-width | 100% | 540px | 720px | 960px | 1140px |
ตัวอย่างการใช้คลาส .container
<div class="container">
<h1>ส่วนหัวเรื่อง</h1>
<p>ส่วนย่อหน้า</p>
</div>
Fluid Container
หากต้องการใช้งานคอนเทนเนอร์ที่มีความกว้างเต็มหน้าจอ ให้ใช้คลาส .container-fluid
ซึ่งคอนเทนเนอร์จะมีความกว้าง 100% เสมอ
ตัวอย่างการใช้งานคลาส .container-fluid
<div class="container-fluid">
<h1>ส่วนหัวเรื่อง</h1>
<p>ส่วนย่อหน้า</p>
</div>
Container Padding ระยะห่างจากขอบด้านในของคอนเทนเนอร์
โดยปกติ คอนเทนเนอร์จะมี padding (ระยะห่างจากขอบด้านใน) ด้านซ้ายและด้านขวา 15px แต่ด้านบนด้านล่างจะไม่มี
หากต้องการเพิ่ม padding
ด้านบนหรือด้านล่าง เราต้องกำหนดโดยการใช้คลาสของ Bootstrap เช่น
<div class="container pt-3"></div>
Container Border and Color ขอบและสีของคอนเทนเนอร์
เราสามารถกำหนดขอบและสีให้กับคอนเทนเนอร์ได้ เช่น
<div class="container p-3 my-3 border">
<h1>คอนเทนเนอร์แบบมีขอบ</h1>
</div>
<div class="container p-3 my-3 bg-dark text-white">
<h1>คอนเทนเนอร์แบบพื้นหลังมืด</h1>
</div>
<div class="container p-3 my-3 bg-primary text-white">
<h1>คอนเทนเนอร์แบบตัวอักษรสีขาว</h1>
</div>
ผลลัพธ์
คอนเทนเนอร์แบบมีขอบ
คอนเทนเนอร์แบบพื้นหลังมืด
คอนเทนเนอร์แบบตัวอักษรสีขาว
Responsive Containers
เราสามารถสร้าง responsive containers ได้ โดยใช้คลาสดังนี้ .container-ขนาดหน้าจอ
โดยที่ ขนาดหน้าจอ สามารถกำหนดได้ดังนี้
sm
คือหน้าจอขนาดเล็ก (small)md
คือหน้าจอขนาดกลาง (medium)lg
คือหน้าจอขนาดใหญ่ (large)xl
คือหน้าจอขนาดใหญ่มาก (extra large)
ความกว้างสูงสุดของคอนเทนเนอร์ max-width
จะเปลี่ยนตามขนาดหน้าจออุปกรณ์ ดังตาราง
Class | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
.container-sm | 100% | 540px | 720px | 960px | 1140px |
.container-md | 100% | 100% | 720px | 960px | 1140px |
.container-lg | 100% | 100% | 100% | 960px | 1140px |
.container-xl | 100% | 100% | 100% | 100% | 1140px |
ตัวอย่างการใช้งาน เช่น
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>