Tạo Layout Phức Tạp với Bootstrap Grid

Trong bài học này, chúng ta sẽ tìm hiểu cách tạo các bố cục web phức tạp hơn bằng Bootstrap Grid, bao gồm Nested Grid (Lồng ghép lưới), Offset (canh lề cột) và Alignment (căn chỉnh cột và hàng). Chúng ta cũng sẽ so sánh khi nào nên dùng Grid System thay vì Flexbox.

1. Nested Grid – Lồng ghép hàng và cột trong Bootstrap

Trong Bootstrap, chúng ta có thể lồng ghép lưới (Nested Grid) bằng cách tạo hàng (row) bên trong cột (col). Điều này giúp bố cục linh hoạt hơn khi cần chia nhỏ nội dung.

Ví dụ Nested Grid

<div class="container">
    <div class="row">
        <div class="col-md-6 bg-primary text-white p-3">
            Cột chính
            <div class="row">
                <div class="col-6 bg-warning p-2">Cột con 1</div>
                <div class="col-6 bg-success p-2">Cột con 2</div>
            </div>
        </div>
        <div class="col-md-6 bg-secondary text-white p-3">
            Cột chính 2
        </div>
    </div>
</div>

Giải thích:

• Cột chính (col-md-6) chứa một hàng (row) khác bên trong.
• Hàng lồng ghép có 2 cột con (col-6), chia đều cột chính.
• Đây là cách giúp chúng ta chia nhỏ bố cục mà vẫn đảm bảo tính linh hoạt.

2. Offset & Alignment – Cách căn lề và căn chỉnh nội dung

Offset – Canh lề cột

Bootstrap cung cấp class offset-* để đẩy cột sang bên phải, giúp cân bằng bố cục.

Ví dụ sử dụng Offset

<div class="container">
    <div class="row">
        <div class="col-md-4 offset-md-2 bg-primary text-white p-3">
            Cột có offset
        </div>
    </div>
</div>

Giải thích:

• col-md-4 offset-md-2 → Cột này có chiều rộng 4 cột, nhưng được đẩy sang phải 2 cột.

Alignment – Căn chỉnh hàng và cột

Bootstrap sử dụng justify-content-* và align-items-* để căn chỉnh nội dung.

Ví dụ căn chỉnh nội dung

<div class="container">
    <div class="row justify-content-center align-items-center" style="height: 300px;">
        <div class="col-4 bg-warning text-dark p-3">
            Nội dung căn giữa
        </div>
    </div>
</div>

Giải thích:

• justify-content-center → Căn giữa theo chiều ngang.
• align-items-center → Căn giữa theo chiều dọc.
• style="height: 300px;" giúp kiểm tra hiệu ứng căn giữa theo chiều dọc.

3. Khi nào nên dùng Grid System thay vì Flexbox?

Gợi ý:

• Dùng Grid khi xây dựng bố cục tổng thể (header, sidebar, content, footer).
• Dùng Flexbox khi căn chỉnh phần tử trong một hàng (menu, thanh điều hướng, nút bấm).
• Có thể kết hợp cả hai để tối ưu thiết kế!

4. Bài tập thực hành

Yêu cầu

Hãy xây dựng một giao diện web hoàn chỉnh với Bootstrap Grid, có các phần:

• Header với menu điều hướng.
• Section giới thiệu có Nested Grid.
• Bố cục có Offset & Alignment để căn chỉnh nội dung đẹp hơn.

Gợi ý bài tập

<div class="container">
    <header class="row bg-dark text-white p-3">
        <div class="col-md-4">Logo</div>
        <div class="col-md-8 text-end">Menu</div>
    </header>
    
    <section class="row mt-4">
        <div class="col-md-6 offset-md-3 bg-light p-3">
            <h2 class="text-center">Giới thiệu Bootstrap Grid</h2>
        </div>
    </section>
    
    <section class="row mt-4">
        <div class="col-md-4 bg-primary text-white p-3">Cột 1</div>
        <div class="col-md-4 bg-success text-white p-3">Cột 2</div>
        <div class="col-md-4 bg-warning text-dark p-3">Cột 3</div>
    </section>
</div>

Kết luận

• Bạn đã học cách tạo layout phức tạp bằng Bootstrap Grid.
• Hiểu về Nested Grid, Offset và Alignment.
• Phân biệt khi nào dùng Grid và khi nào dùng Flexbox.
• Hãy thực hành nhiều hơn để thành thạo Bootstrap Grid!