1. Giới thiệu

Trong Bootstrap 5, Containers (vùng chứa) là một trong những thành phần cốt lõi giúp bạn xây dựng bố cục trang web một cách dễ dàng và hiệu quả. Containers đóng vai trò như một vùng giới hạn chiều rộng của trang web và giúp căn chỉnh nội dung của bạn theo cách có tổ chức. Tất cả nội dung trang web của bạn thường được đặt bên trong containers để tận dụng hệ thống lưới (grid) của Bootstrap.

2. Các loại Containers trong Bootstrap 5

Bootstrap 5 cung cấp ba loại containers chính để bạn lựa chọn tùy theo nhu cầu và thiết kế của dự án:

  1. .container – Container cố định, chiều rộng thay đổi dựa trên kích thước màn hình.
  2. .container-fluid – Container có chiều rộng luôn bằng 100% của màn hình.
  3. .container-{breakpoint} – Container tùy chỉnh dựa trên kích thước màn hình cụ thể (responsive).

3. Cách sử dụng Containers

a. .container – Container cố định

.container là loại container có chiều rộng cố định và tự động thay đổi theo kích thước màn hình (responsive). Khi màn hình lớn hơn, container sẽ giãn ra, nhưng khi màn hình nhỏ hơn, container sẽ thu gọn lại.

Cú pháp:

html
Thử online
<div class="container">
    <!-- Nội dung của bạn ở đây -->
</div>

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Fixed Container</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container bg-light p-3">
        <h1>Container cố định</h1>
        <p>Container này có chiều rộng thay đổi dựa trên kích thước màn hình.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

Trong ví dụ này, .container sẽ thay đổi chiều rộng dựa trên các breakpoints của Bootstrap. Ở mỗi kích thước màn hình, container sẽ có chiều rộng khác nhau như sau:

  • 100% trên các màn hình nhỏ hơn 576px (extra small devices)
  • 540px trên màn hình từ 576px trở lên (small devices)
  • 720px trên màn hình từ 768px trở lên (medium devices)
  • 960px trên màn hình từ 992px trở lên (large devices)
  • 1140px trên màn hình từ 1200px trở lên (extra large devices)
  • 1320px trên màn hình từ 1400px trở lên (extra extra large devices)

b. .container-fluid – Container toàn màn hình

.container-fluid là loại container có chiều rộng luôn bằng 100% kích thước màn hình, bất kể độ phân giải của màn hình. Điều này có nghĩa là container này sẽ luôn mở rộng hoặc thu nhỏ toàn bộ chiều rộng của cửa sổ trình duyệt.

Cú pháp:

html
Thử online
<div class="container-fluid">
    <!-- Nội dung của bạn ở đây -->
</div>

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Fluid Container</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid bg-primary text-white p-3">
        <h1>Container toàn màn hình</h1>
        <p>Container này luôn có chiều rộng 100% của màn hình.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

c. .container-{breakpoint} – Container tùy chỉnh theo breakpoint

Bootstrap 5 cung cấp các containers tùy chỉnh dựa trên breakpoints (các ngưỡng kích thước màn hình khác nhau), giúp bạn có thể kiểm soát chiều rộng của container dựa trên kích thước màn hình cụ thể. Điều này cho phép bạn thiết kế bố cục phù hợp cho từng kích thước thiết bị.

  • .container-sm: Cho thiết bị nhỏ (≥576px)
  • .container-md: Cho thiết bị trung bình (≥768px)
  • .container-lg: Cho thiết bị lớn (≥992px)
  • .container-xl: Cho thiết bị rất lớn (≥1200px)
  • .container-xxl: Cho thiết bị cực lớn (≥1400px)

Cú pháp:

html
Thử online
<div class="container-md">
    <!-- Nội dung của bạn ở đây -->
</div>

Ví dụ:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Breakpoint Container</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-md bg-warning p-3">
        <h1>Container tùy chỉnh theo kích thước màn hình</h1>
        <p>Container này có chiều rộng cố định cho màn hình trung bình (md) trở lên.</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

4. Khi nào nên sử dụng Container và Container-fluid?

  • Sử dụng .container khi bạn muốn nội dung của mình được giới hạn trong một vùng có chiều rộng cố định để tạo cảm giác gọn gàng và cân đối trên mọi thiết bị. Đây là tùy chọn phổ biến khi bạn không muốn nội dung của mình giãn toàn bộ chiều rộng của màn hình.
  • Sử dụng .container-fluid khi bạn muốn nội dung của mình phủ toàn bộ màn hình hoặc khi bạn xây dựng những trang web yêu cầu bố cục mở rộng, chẳng hạn như các trang dashboard, ứng dụng web.

5. Kết hợp Containers với hệ thống lưới (Grid system)

Trong Bootstrap 5, containers thường được sử dụng cùng với hệ thống lưới để tạo ra các bố cục trang web có tổ chức và dễ dàng điều chỉnh theo kích thước màn hình.

Ví dụ về kết hợp container với hệ thống lưới:

html
Thử online
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Grid System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-4 bg-light p-3">
                <p>Cột 1</p>
            </div>
            <div class="col-4 bg-secondary text-white p-3">
                <p>Cột 2</p>
            </div>
            <div class="col-4 bg-dark text-white p-3">
                <p>Cột 3</p>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>

6. Kết luận

Containers là thành phần quan trọng trong Bootstrap 5, giúp bạn kiểm soát bố cục và căn chỉnh nội dung trên các trang web. Việc hiểu rõ và sử dụng đúng containers (cố định hoặc toàn màn hình) sẽ giúp bạn xây dựng trang web chuyên nghiệp, gọn gàng và dễ dàng tương thích với mọi kích thước màn hình.

Hãy thử áp dụng các ví dụ trong bài viết để hiểu rõ hơn cách sử dụng Bootstrap 5 Containers trên CodeTutHub!