🎯 Sử dụng class `row` vs `col` trong Bootstrap

Trong Bootstrap, hệ thống Grid (lưới) là cốt lõi để thiết kế layout responsive (tương thích nhiều thiết bị). 

02 class chính được dùng là row và col

---

🔧 Cách sử dụng row và col trong Bootstrap

🧱 Cấu trúc cơ bản:

<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>

🧠 Ý nghĩa:

• container: vùng chứa, giúp căn giữa nội dung (có thể dùng container-fluid nếu muốn full width).

• row: dòng (hàng), dùng để bọc các cột col.

• col: cột – tự động chia đều chiều rộng nếu không chỉ định rõ.

---

📏 Cách chia cột cụ thể:

Bootstrap chia layout thành 12 cột. 

<div class="row">
        <div class="col-4">Chiếm 4/12</div>
        <div class="col-8">Chiếm 8/12</div>
</div>

---

📱 Responsive với các breakpoint:

Class	Kích thước áp dụng
col-	Mặc định (tất cả thiết bị)
col-sm-	≥ 576px (điện thoại ngang)
col-md-	≥ 768px (máy tính bảng)
col-lg-	≥ 992px (laptop)
col-xl-	≥ 1200px (desktop lớn)
col-xxl-	≥ 1400px (màn hình cực lớn)

🧪 Ví dụ responsive:

<div class="row">
     <div class="col-12 col-md-6 col-lg-4">Cột Responsive</div>
     <div class="col-12 col-md-6 col-lg-8">Cột Responsive</div>
</div>

---

🧩 Mẹo nâng cao:

Tình huống	Cách xử lý
Căn giữa nội dung trong cột	Dùng d-flex justify-content-center align-items-center
Khoảng cách giữa cột	Bootstrap dùng g-0 đến g-5 (gutter spacing)
Nesting grid (grid trong grid)	Dùng .row & .col lồng nhau

🧪 Ví dụ gutter spacing:

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

---

✅ Tổng kết nhanh:

Thành phần	Vai trò
row	Tạo dòng chứa các cột
col	Tạo các cột trong dòng
col-X	Chỉ định số cột chiếm (1–12)
col-md-X	Responsive theo breakpoint

---

✨ [ Made by AI ] – Built with neural networks 🧠⚙️