Trong hệ thống lưới (Grid System) của Bootstrap 5, cột (Columns) đóng vai trò là thành phần cốt lõi, giúp chúng ta tạo nên những layout (bố cục) linh hoạt và đẹp mắt trên mọi thiết bị. Đây là một trong những yếu tố quan trọng nhất để xây dựng giao diện người dùng (UI) hiện đại và đáp ứng (responsive). Trong bài viết này, CodeTutHub sẽ hướng dẫn bạn cách sử dụng các thuộc tính cột của Bootstrap 5 để tạo ra bố cục website một cách dễ dàng và hiệu quả.

1. Hệ thống Grid trong Bootstrap 5

Bootstrap sử dụng hệ thống lưới 12 cột, giúp bạn có thể chia không gian trang web thành các phần khác nhau. Bằng cách kết hợp các cột, bạn có thể tạo ra các bố cục có chiều rộng khác nhau mà vẫn giữ được sự nhất quán.

2. Cấu trúc cơ bản của Column

Trong Bootstrap 5, để sử dụng cột, bạn cần đặt các phần tử cột bên trong phần tử hàng (row). Cấu trúc cơ bản là:

<div class="container">
    <div class="row">
        <div class="col">Cột 1</div>
        <div class="col">Cột 2</div>
        <div class="col">Cột 3</div>
    </div>
</div>

Trong ví dụ trên, col tự động chia đều không gian cho ba cột, mỗi cột sẽ chiếm một phần ba chiều rộng của hàng.

3. Các kích thước của cột

Bootstrap 5 cung cấp các class để tạo cột với kích thước khác nhau trên từng loại thiết bị (gồm col-, col-sm-, col-md-, col-lg-, col-xl-, và col-xxl-). Mỗi class sẽ áp dụng kích thước cột cho một ngưỡng màn hình nhất định:

• col: Kích thước mặc định, áp dụng cho mọi loại thiết bị.
• col-sm: Áp dụng cho màn hình nhỏ (≥576px).
• col-md: Áp dụng cho màn hình trung bình (≥768px).
• col-lg: Áp dụng cho màn hình lớn (≥992px).
• col-xl: Áp dụng cho màn hình rất lớn (≥1200px).
• col-xxl: Áp dụng cho màn hình cực lớn (≥1400px).

Ví dụ:

<div class="container">
    <div class="row">
        <div class="col-md-8">Cột lớn - Chiếm 8 phần</div>
        <div class="col-md-4">Cột nhỏ - Chiếm 4 phần</div>
    </div>
</div>

Trong ví dụ trên, cột đầu tiên chiếm 8 phần và cột thứ hai chiếm 4 phần trên màn hình md (≥768px). Trên các thiết bị nhỏ hơn 768px, các cột sẽ tự động chiếm 100% chiều rộng hàng.

4. Chia tỷ lệ cột

Bạn có thể kết hợp các class kích thước khác nhau để tạo ra các bố cục phức tạp hơn. Dưới đây là ví dụ:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">Cột</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Cột</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Cột</div>
        <div class="col-sm-6 col-md-4 col-lg-3">Cột</div>
    </div>
</div>

Trong ví dụ này, mỗi cột chiếm:

• 50% trên thiết bị nhỏ (sm)
• 33,33% trên thiết bị trung bình (md)
• 25% trên thiết bị lớn (lg)

5. Cột tự động (Auto Columns)

Ngoài việc chỉ định số lượng cột, bạn có thể sử dụng col-auto để tạo các cột có chiều rộng tự động, vừa đủ để chứa nội dung bên trong.

<div class="container">
    <div class="row">
        <div class="col-auto">Cột tự động</div>
        <div class="col">Cột còn lại</div>
    </div>
</div>

Cột đầu tiên sẽ tự động co dãn theo kích thước nội dung, trong khi cột thứ hai sẽ chiếm phần còn lại của hàng.

6. Căn chỉnh và sắp xếp cột

Bootstrap 5 cung cấp các class tiện ích để căn chỉnh cột như align-items, justify-content, giúp việc sắp xếp và căn chỉnh các phần tử trong hàng dễ dàng hơn.

<div class="container">
    <div class="row align-items-center">
        <div class="col">Cột 1</div>
        <div class="col">Cột 2</div>
        <div class="col">Cột 3</div>
    </div>
</div>

7. Khoảng cách giữa các cột (Gutters)

Khoảng cách giữa các cột được gọi là gutter. Bootstrap 5 cho phép bạn tùy chỉnh khoảng cách này thông qua các class g- từ g-0 đến g-5:

<div class="container">
    <div class="row g-2">
        <div class="col">Cột 1</div>
        <div class="col">Cột 2</div>
        <div class="col">Cột 3</div>
    </div>
</div>

8. Cột xếp chồng trên thiết bị nhỏ

Khi muốn cột hiển thị theo dạng xếp chồng trên các thiết bị nhỏ, bạn có thể sử dụng chỉ định kích thước cụ thể cho màn hình lớn hơn, và để mặc định cho các thiết bị nhỏ.

<div class="container">
    <div class="row">
        <div class="col-md-6">Cột 1</div>
        <div class="col-md-6">Cột 2</div>
    </div>
</div>

Trong ví dụ trên, trên thiết bị md trở lên, hai cột sẽ hiển thị theo chiều ngang, nhưng trên các thiết bị nhỏ hơn, chúng sẽ tự động xếp chồng theo chiều dọc.

9. Kết luận

Hiểu và sử dụng thành thạo hệ thống lưới của Bootstrap 5 giúp bạn dễ dàng xây dựng những bố cục giao diện phức tạp nhưng vẫn dễ đọc, trực quan, và thân thiện với mọi loại thiết bị. Với hệ thống cột linh hoạt và các công cụ hỗ trợ khác như căn chỉnh, khoảng cách, bạn có thể tạo ra những trang web đẹp mắt và chuyên nghiệp. Hãy bắt đầu thử nghiệm ngay để hiểu thêm về sức mạnh của Bootstrap 5 Columns!