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

Fixed Container
Fixed Container หรือ ตัวบรรจุที่มีความกว้างคงที่ จะมีความกว้างสูงสุด (max-width) แบบคงที่ (เปลี่ยนตามขนาดหน้าจออุปกรณ์) ดังนี้
Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra Large ≥1200px | XXLarge ≥1400px | |
---|---|---|---|---|---|---|
max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
- บนอุปกรณ์ที่มีหน้าจอขนาดเล็กเป็นพิเศษ (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 จะเปลี่ยนไปตามขนาดของหน้าจอแสดงผล ซึ่งมีรายละเอียดการแสดงผลของคลาสแต่ละตัว ดังนี้
Class | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | XXLarge ≥1400px |
---|---|---|---|---|---|---|
.container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
.container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
.container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
.container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
.container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
ตัวอย่างการใช้งาน
<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>
- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples