ทำความรู้จักกับ Container ใน Bootstrap 5

การใช้งานคลาสต่าง ๆ ของ Bootstrap เพื่อตกแต่งเว็บไซต์ ต้องทำภายใต้ตัวบรรลุ หรือที่เรียกว่า Container ซึ่งใน Bootstrap 5 มีคลาสสำหรับกำหนด Container 2 ตัว คือ

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

เพื่อความเข้าใจที่ชัดเจนขึ้น ให้ดูรูปด้านล่างเพื่อสังเกตความแตกต่างด้านความกว้างของ Container ทั้ง 2 แบบ

Fixed Container

Fixed Container หรือ ตัวบรรจุที่มีความกว้างคงที่ จะมีความกว้างสูงสุด (max-width) แบบคงที่ (เปลี่ยนตามขนาดหน้าจออุปกรณ์) ดังนี้

• บนอุปกรณ์ที่มีหน้าจอขนาดเล็กเป็นพิเศษ (Extra small) คือความละเอียดหน้าจอน้อยกว่า 576px Fixed Container จะมีความกว้าง 100%
• บนอุปกรณ์ที่มีหน้าจอขนาดเล็ก (Small) คือความละเอียดหน้าจอมากกว่าหรือเท่ากับ 576px Fixed Container จะมีความกว้าง 540px
• บนอุปกรณ์ที่มีหน้าจอขนาดปานกลาง (Medium) คือความละเอียดหน้าจอมากกว่าหรือเท่ากับ768px Fixed Container จะมีความกว้าง 720px
• บนอุปกรณ์ที่มีหน้าจอขนาดใหญ่ (Large) คือความละเอียดหน้าจอมากกว่าหรือเท่ากับ 992px Fixed Container จะมีความกว้าง 960px
• บนอุปกรณ์ที่มีหน้าจอขนาดใหญ่เป็นพิเศษ (Extra large) คือความละเอียดหน้าจอมากกว่าหรือเท่ากับ 1200px Fixed Container จะมีความกว้าง 1140px
• บนอุปกรณ์ที่มีหน้าจอขนาดใหญ่มาก (XXLarge) คือความละเอียดหน้าจอมากกว่าหรือเท่ากับ 1400px Fixed Container จะมีความกว้าง 1320px

ตัวอย่างการใช้งาน Fixed Container ให้ใช้คลาส .container ดังนี้

<div class="container">
  <h1>Using Fixed Container</h1>
  <p>This is fixed container</p>
</div>

Fluid Container

Fluid Container หรือตัวบรรจุที่มีความยึดหยุดตามอุปกรณ์ คือตัว Container จะปรับความกว้างตามขนาดหน้าจออุปกรณ์ที่แสดงผลอยู่ในขณะนั้น โดยความหมายก็คือ จะมีความกว้างแบบ full width คือเต็มหน้าจอ (100%) ตลอดเวลานั่นเอง

เราสามารถใช้งาน Fluid Container ได้โดยการใช้คลาส .container-fluid ดังนี้

<div class="container-fluid">
  <h1>Using Fluid Container</h1>
  <p>This is fluid container</p>
</div>

Container Padding

โดยปกติ Container ของ Bootstrap จะกำหนดระยะห่างระหว่างเนื้อหากับขอบด้านใน (Padding) ของ Container เอาไว้ โดยจะมีเฉพาะด้านซ้ายและด้านขวาเท่านั้น ด้านบนและด้านล่างไม่ได้กำหนดไว้ แต่เราสามารถกำหนดเพิ่มเติมได้โดยการเพิ่มคลาสเข้ามา เช่น .pt-5 และ .pb-5 เป็นการเพิ่มระยะห่างระหว่างเนื้อหากับขอบด้านบนและด้านล่าง ด้านละ 5px ดังตัวอย่าง

<div class="container pt-5 pb-5">
  <h1>Using Fixed Container</h1>
  <p>This is fixed container</p>
</div>

• บรรทัดที่ 1 เพิ่มคลาส .pt-5 และ .pb-5 เข้ามา เพื่อกำหนดระยะห่างระหว่างเนื้อหากับขอบด้านบนและด้านล่าง ด้านละ 5px

หรือเราจะใช้คลาส .p ตามด้วยตัวเลข เพื่อกำหนดระยะหว่างระหว่างเนื้อหากับขอบด้านในด้านละเท่า ๆ กันก็ได้ (บน ล่าง ซ้าย ขวา) เช่น .p-5 จะเป็นการกำหนด padding ด้านละ 5px

<div class="container p-5">
  <h1>Using Fixed Container</h1>
  <p>This is fixed container</p>
</div>

• บรรทัดที่ 1 เพิ่มคลาส .p-5 เข้ามา เพื่อกำหนดระยะห่างระหว่างเนื้อหากับขอบทั้ง 4 ด้าน ด้านละ 5px

เส้นขอบและสีของ Container

เราสามารถกำหนดเส้นขอบและสีให้ Container ได้เช่นกัน

ถ้าต้องการกำหนดให้ Container แสดงเส้นขอบ สามารถทำได้โดยการเพิ่มคลาส .border ดังนี้

<div class="container p-5 my-3 border">
  <h1>Using Fixed Container</h1>
  <p>This is fixed container</p>
</div>

• บรรทัดที่ 1 เพิ่มคลาส .border เข้ามา เพื่อให้ Container แสดงเส้นขอบ

ผลลัพธ์ จะเห็นว่า ที่ตัว Container มีเส้นขอบแสดงอยู่

ถ้าต้องการกำหนดสีพื้นหลังให้ Container ก็สามารถทำได้โดยใช้คลาสสำหรับกำหนดสีพื้นหลังตัวใดตัวหนึ่ง ดังนี้ .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark หรือ .bg-light. ดังตัวอย่าง

<div class="container p-5 my-3 bg-primary">
  <h1>Using Fixed Container</h1>
  <p>This is fixed container</p>
</div>

• บรรทัดที่ 1 เพิ่มคลาส .bg-primary เข้าไปใน Container เพื่อกำหนดสีพื้นหลังเป็นสีน้ำเงิน

โดยปกติ สีตัวอักษรจะถูกำหนดให้เป็นสีดำเป็นค่าเริ่มต้น แต่ถ้าต้องการกำหนดสีตัวอักษรเป็นสีอื่น ๆ สามารถทำได้โดยการใช้คลาสสำหรับกำหนดสีตัวอักษร คลาสใดคลาสหนึ่งดังนี้  .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body ดังตัวอย่าง

<div class="container p-5 my-3 bg-primary text-white">
  <h1>Using Fixed Container</h1>
  <p>This is fixed container</p>
</div>

• บรรทัดที่ 1 เพิ่มคลาส .text-white เข้ามา เพื่อกำหนดสีตัวอักษรเป็นสีขาว

Responsive Containers

เราสามารถกำหนดได้ว่าจะให้ Container แสดงผลแบบ responsive เมื่ออยู่บนหน้าจอขนาดใด โดยใช้คลาส .container-sm|md|lg|xl แล้วความกว้างสูงสุดของ Container จะเปลี่ยนไปตามขนาดของหน้าจอแสดงผล ซึ่งมีรายละเอียดการแสดงผลของคลาสแต่ละตัว ดังนี้

ตัวอย่างการใช้งาน

<div class="container-sm p-2 my-3 border">
    <h1>Using class .container-sm</h1>
</div>
<div class="container-md p-2 my-3 border">
    <h1>Using class .container-md</h1>
</div>
<div class="container-lg p-2 my-3 border">
    <h1>Using class .container-lg</h1>
</div>
<div class="container-xl p-2 my-3 border">
    <h1>Using class .container-xl</h1>
</div>
<div class="container-xxl p-2 my-3 border">
    <h1>Using class .container-xxl</h1>
</div>