Trong hệ thống lưới của Bootstrap 5, Gutters là thuật ngữ dùng để chỉ khoảng cách giữa các cột. Việc tùy chỉnh gutters giúp bạn kiểm soát độ rộng của khoảng trống giữa các cột, từ đó tạo nên bố cục gọn gàng và cân đối hơn. Trong bài viết này, CodeTutHub sẽ giới thiệu cách sử dụng và tùy chỉnh gutters trong Bootstrap 5, giúp bạn linh hoạt hơn khi xây dựng giao diện website.

1. Gutters trong Bootstrap 5 là gì?

Gutters là các khoảng trống nằm giữa các cột trong một hàng (row), giúp không gian giữa các cột rõ ràng hơn. Bootstrap 5 cho phép bạn dễ dàng tùy chỉnh kích thước của gutters, giúp giao diện trở nên đẹp mắt và dễ đọc hơn, đặc biệt là trên các thiết bị có kích thước màn hình khác nhau.

2. Các kích thước Gutters trong Bootstrap 5

Bootstrap 5 cung cấp các class gutter từ g-0 đến g-5, tương ứng với kích thước từ không có khoảng cách (0) đến khoảng cách lớn nhất (5). Các class này có thể được áp dụng lên hàng (row) để điều chỉnh khoảng cách giữa các cột bên trong hàng đó:

• g-0: Không có khoảng cách giữa các cột.
• g-1: Khoảng cách nhỏ giữa các cột.
• g-2: Khoảng cách vừa.
• g-3: Khoảng cách trung bình.
• g-4: Khoảng cách lớn.
• g-5: Khoảng cách lớn nhất.

Ví dụ:

<div class="container">
    <div class="row g-3">
        <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, class g-3 được áp dụng để tạo khoảng cách trung bình giữa các cột. Điều này giúp các phần tử cột tách biệt rõ ràng mà vẫn duy trì được sự cân đối trên toàn bộ giao diện.

3. Tùy chỉnh Gutters cho chiều dọc và chiều ngang

Bootstrap 5 cho phép tùy chỉnh khoảng cách gutters riêng cho chiều ngang (horizontal) hoặc chiều dọc (vertical) thông qua các class gx-* và gy-*.

• gx-*: Điều chỉnh khoảng cách giữa các cột theo chiều ngang.
• gy-*: Điều chỉnh khoảng cách giữa các hàng theo chiều dọc.

Ví dụ:

<div class="container">
    <div class="row gx-2 gy-4">
        <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ụ này:

• gx-2 tạo khoảng cách ngang giữa các cột là mức 2.
• gy-4 tạo khoảng cách dọc giữa các hàng là mức 4.

4. Gutters Responsive cho các thiết bị khác nhau

Bootstrap 5 cho phép bạn tùy chỉnh gutters trên từng loại kích thước màn hình bằng cách kết hợp các class breakpoint như g-sm-*, g-md-*, g-lg-*, v.v. Điều này giúp bạn kiểm soát tốt hơn khoảng cách giữa các cột trên từng loại thiết bị khác nhau.

Ví dụ:

<div class="container">
    <div class="row g-2 g-md-4 g-lg-5">
        <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:

• g-2: Áp dụng khoảng cách 2 cho các thiết bị nhỏ (xs).
• g-md-4: Áp dụng khoảng cách 4 cho màn hình trung bình (≥768px).
• g-lg-5: Áp dụng khoảng cách 5 cho màn hình lớn (≥992px).

5. Kết hợp Gutters với các class khác

Gutters có thể được kết hợp linh hoạt với các class khác của Bootstrap 5 như các class căn chỉnh (align-items, justify-content) và các class lưới để tạo bố cục phức tạp mà vẫn giữ được sự cân đối và linh hoạt.

Ví dụ kết hợp:

<div class="container">
    <div class="row g-3 justify-content-center align-items-center">
        <div class="col-6 col-md-4">Cột 1</div>
        <div class="col-6 col-md-4">Cột 2</div>
    </div>
</div>

Ở đây:

• g-3 tạo khoảng cách giữa các cột ở mức 3.
• justify-content-center căn giữa các cột trong hàng.
• align-items-center căn giữa các cột theo chiều dọc.

6. Gutters không có trong một số trường hợp

Nếu bạn muốn loại bỏ gutters, chỉ cần thêm class g-0 vào hàng để tất cả các khoảng cách giữa các cột biến mất:

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

7. Kết luận

Gutters trong Bootstrap 5 là một công cụ linh hoạt để điều chỉnh khoảng cách giữa các cột và hàng, giúp bạn tạo ra bố cục có khoảng cách hợp lý và cân đối. Với các class g-*, gx-*, và gy-*, bạn có thể dễ dàng tùy chỉnh gutters cho mọi loại thiết bị và kiểu bố cục. Hãy thử áp dụng Gutters vào dự án của bạn để thấy sự khác biệt mà chúng mang lại cho bố cục website của bạn!

Với bài viết này, hy vọng bạn đã hiểu rõ hơn về cách sử dụng Gutters trong Bootstrap 5 để tạo layout hiệu quả và đẹp mắt.