Bootstrap 4 การใช้งาน Containers

ใน Bootstrap 4 เราต้องกำหนดเอลิเมนต์สำหรับเป็น Container ขึ้นมา 1 เอลิเมนต์ เพื่อบรรจุเอลิเมนต์ตัวอื่น ๆ ไว้ด้านใน และใน Bootstrap จะใช้ class เป็นตัวระบุว่าอิลิเมนต์นั้นเป็น Container แบบไหน โดยจะมีอยู่ 2 แบบ คือ

  1. คลาส .container สำหรับกำหนดคอนเทนเนอร์แบบ fixed width container (ความกว้างไม่เต็มหน้าจอ มีขอบด้านข้างทั้งสองข้าง)
  2. คลาส .container-fluid สำหรับกำหนดคอนเทนเนอร์แบบ full width container ความกว้างเต็มหน้าจอ

Fixed Container

เมื่อต้องการใช้งานคอนเทนเนอร์แบบ fixed-width container ให้ใช้คลาส .container ซึ่งความกว้างของคอนเทนเนอร์จะเปลี่ยนตามขนาดหน้าจอ ดังตาราง

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
max-width100%540px720px960px1140px

ตัวอย่างการใช้คลาส .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 จะเปลี่ยนตามขนาดหน้าจออุปกรณ์ ดังตาราง

ClassExtra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%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>