Bootstrap Container

Trong hướng dẫn này, bạn sẽ học cách tạo container (vùng chứa) bằng Bootstrap.

Tạo container bằng Bootstrap

Container là phần tử bố cục cơ bản nhất trong Bootstrap và được yêu cầu khi sử dụng hệ thống lưới (grid system). Container về cơ bản được sử dụng để bọc nội dung với một số phần đệm. Chúng cũng được sử dụng để căn chỉnh nội dung theo chiều ngang chính giữa trang trong trường hợp bố cục chiều rộng cố định.

Bootstrap cung cấp ba loại container khác nhau:

• .container – có chiều rộng tối đa tại mỗi điểm ngắt thích  ứng.
• .container-fluid – có 100% chiều rộng tại tất cả các điểm ngắt.
• .container-{breakpoint} – có chiều rộng 100% cho đến điểm ngắt được chỉ định.

Bảng bên dưới minh họa cách chiều rộng tối đa của mỗi container thay đổi trên mỗi điểm ngắt.

Ví dụ: khi sử dụng lớp .container, chiều rộng thực tế của container sẽ là 100% nếu chiều rộng khung nhìn < 576px, 540px nếu chiều rộng khung nhìn ≥ 576px và < 768px, 720px nếu chiều rộng khung nhìn ≥ 768px và < 992px, 960px nếu chiều rộng khung nhìn ≥ 992px và < 1200px, 1140px nếu chiều rộng khung nhìn ≥ 1200px và < 1400px và 1320px nếu chiều rộng khung nhìn ≥ 1400px.

Tương tự, khi bạn sử dụng lớp .container-lg, chiều rộng thực tế của container sẽ là 100% cho đến khi chiều rộng khung nhìn là < 992px, 960px nếu chiều rộng khung nhìn ≥ 992px và < 1200px, 1140px nếu chiều rộng khung nhìn ≥ 1200px và < 1400px và 1320px nếu chiều rộng khung nhìn là ≥ 1400px.

Tạo responsive fixed-width container

Bạn có thể chỉ cần sử dụng lớp .container để tạo một container thích ứng, có chiều rộng cố định (Responsive Fixed-width). Chiều rộng của container sẽ thay đổi ở các điểm ngắt hoặc kích thước màn hình khác nhau, như được hiển thị ở trên.

<div class="container">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Tạo fluid container

Bạn có thể sử dụng lớp .container-fluid để tạo một container có chiều rộng đầy đủ (fluid container). Chiều rộng của fluid container sẽ luôn bằng 100% không phân biệt thiết bị hoặc kích thước màn hình.

<div class="container-fluid">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Chỉ định các điểm ngắt thích ứng cho container

Kể từ Bootstrap v4.4, bạn cũng có thể tạo container có chiều rộng 100% cho đến khi đạt đến điểm ngắt được chỉ định, sau đó chiều rộng tối đa cho mỗi điểm ngắt cao hơn sẽ được áp dụng.

Ví dụ: .container-xl sẽ rộng 100% cho đến khi đạt đến điểm ngắt xl (tức là chiều rộng khung nhìn ≥ 1200px), sau đó chiều rộng tối đa cho điểm ngắt xl được áp dụng, là 1140px.

<div class="container-sm">100% wide until screen size less than 576px</div>
<div class="container-md">100% wide until screen size less than 768px</div>
<div class="container-lg">100% wide until screen size less than 992px</div>
<div class="container-xl">100% wide until screen size less than 1200px</div>

Thêm background và border vào container

Theo mặc định, container không có bất kỳ background-color hoặc border. Nhưng nếu cần, bạn có thể áp dụng các kiểu của riêng mình hoặc chỉ cần sử dụng các lớp tiện ích background color và border của Bootstrap để thêm màu nền hoặc đường viền trên chúng, như thể hiện trong ví dụ sau.

<!-- Container with dark background and white text color -->
<div class="container bg-dark text-white">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- Container with light background -->
<div class="container bg-light">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

<!-- Container with border -->
<div class="container border">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Áp dụng padding và margin cho container

Theo mặc định, các container có padding là 12px ở bên trái và bên phải và không có padding ở phía trên và dưới. Để áp dụng thêm padding và margin, bạn có thể sử dụng các lớp tiện ích padding và margin của Bootstrap.

<!-- Container with border, extra paddings and margins -->
<div class="container border py-3 my-3">
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</div>

Mẹo: Tránh đặt margin left và margin right trên các container cố định và thích ứng, vì giá trị auto được Bootstrap áp dụng tự động cho thuộc tính margin-left và margin-right tại các điểm ngắt nhất định để căn chỉnh container theo chiều ngang chính giữa.