
Bootstrap 4 การใช้งาน Containers
ใน 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>
- Bootstrap 4 Get Started
- Bootstrap 4 Container
- Bootstrap 4 Grid Basic
- Bootstrap 4 Typography
- Bootstrap 4 Colors
- Bootstrap 4 Tables
- Bootstrap 4 Images
- Bootstrap 4 Jambotron
- Bootstrap 4 Alerts
- Bootstrap 4 Buttons
- Bootstrap 4 Button Groups
- Bootstrap 4 Badges
- Bootstrap 4 Progress Bars
- Bootstrap 4 Spinners
- Bootstrap 4 Pagination
- Bootstrap 4 List Groups
- Bootstrap 4 Cards
- Bootstrap 4 Dropdowns
- Bootstrap 4 Collapse
- Bootstrap 4 Navs
- Bootstrap 4 Navbars
- Bootstrap 4 Forms
- Bootstrap 4 Toasts
- Bootstrap 4 Scrollspy
- Bootstrap 4 Utilities
- Bootstrap 4 Flex
- Bootstrap 4 Icons
- Bootstrap 4 Media Objects
- Bootstrap 4 Filters
- Bootstrap 4 Grid System
- Bootstrap 4 Grid Stacked to horizontal
- Bootstrap 4 Grid Extra Small
- Bootstrap 4 Grid Small
- Bootstrap 4 Grid Medium
- Bootstrap 4 Grid Large
- Bootstrap 4 Grid Extra Large
- Bootstrap 4 Grid Examples
- Bootstrap 4 Inputs
- Bootstrap 4 Input Groups
- Bootstrap 4 Custom Forms
- Bootstrap 4 Carousel
- Bootstrap 4 Modal
- Bootstrap 4 Tooltip
- Bootstrap 4 Popover