Bài 2. Hệ thống lưới: container, row, col

Hệ thống lưới 12 cột dựa trên Flexbox là trái tim của Bootstrap, giúp dựng bố cục responsive chỉ bằng class. Bài này học container, row, col, breakpoint, chia cột tự động, gutters, sắp xếp và lồng lưới.

55 phútCơ bản
Bạn sẽ học được
  • Chọn đúng loại container
  • Chia cột với col, col-6, col-md-4
  • Dùng 6 breakpoint xs, sm, md, lg, xl, xxl
  • Điều chỉnh gutters, offset, order, căn chỉnh cột
Thuật ngữ cần biết
Breakpoint
Mốc chiều rộng: sm ≥576, md ≥768, lg ≥992, xl ≥1200, xxl ≥1400px.
Gutter
Khoảng cách giữa các cột.
Mobile-first
col-md-6 nghĩa là từ md trở lên chiếm 6/12; nhỏ hơn thì chiếm hết hàng.

Một số khái niệm

Quy tắc: container chứa row, row chứa col, nội dung đặt trong col. Mỗi hàng có 12 phần; col-4 chiếm 4/12 = 1/3. Lớp có tiền tố breakpoint áp dụng từ breakpoint đó trở lên: col-12 col-md-6 col-lg-4 nghĩa là điện thoại 1 cột, máy tính bảng 2 cột, laptop 3 cột.

ContainerChiều rộng
.containerCố định theo từng breakpoint
.container-fluid100% mọi màn hình
.container-md100% đến md, sau đó cố định

Chia cột cơ bản

<style>.row>div>div{background:#e7f1ff;border:1px solid #9ec5fe;padding:8px;text-align:center;border-radius:6px;font-size:13px}</style>
<div class="container">
  <div class="row g-2 mb-2"><div class="col"><div>col</div></div><div class="col"><div>col</div></div><div class="col"><div>col</div></div></div>
  <div class="row g-2 mb-2"><div class="col-8"><div>col-8</div></div><div class="col-4"><div>col-4</div></div></div>
  <div class="row g-2 mb-2"><div class="col-3"><div>col-3</div></div><div class="col"><div>col (phần còn lại)</div></div><div class="col-auto"><div>col-auto</div></div></div>
</div>
Kết quả hiển thị

Responsive theo breakpoint

<style>.the{background:#d1e7dd;border:1px solid #a3cfbb;padding:14px;border-radius:8px;text-align:center}</style>
<div class="container">
  <div class="row g-3">
    <div class="col-12 col-sm-6 col-lg-3"><div class="the">Python</div></div>
    <div class="col-12 col-sm-6 col-lg-3"><div class="the">JavaScript</div></div>
    <div class="col-12 col-sm-6 col-lg-3"><div class="the">PHP</div></div>
    <div class="col-12 col-sm-6 col-lg-3"><div class="the">SQL</div></div>
  </div>
  <div class="row row-cols-2 row-cols-md-4 g-2 mt-1">
    <div class="col"><div class="the">row-cols</div></div><div class="col"><div class="the">2 / 4</div></div><div class="col"><div class="the">cột</div></div><div class="col"><div class="the">đều</div></div>
  </div>
</div>
Kết quả hiển thị

Khung kết quả hẹp nên hiện 1–2 cột; trên màn hình rộng sẽ là 4 cột. row-cols-* đặt số cột ngay trên row, rất gọn cho lưới thẻ.

Gutters, offset, order, căn chỉnh

<div class="row g-4">...</div>          <!-- khoảng cách 4 cả ngang và dọc; gx-*, gy-* riêng -->
<div class="row g-0">...</div>          <!-- không khoảng cách -->
<div class="col-md-4 offset-md-4">...</div>  <!-- lùi 4 cột: căn giữa -->
<div class="col order-last order-md-first">...</div>
<div class="row align-items-center justify-content-between">...</div>
<div class="row"><div class="col-md-8"><div class="row">...lồng lưới...</div></div></div>
Mẹo hay

Nghĩ theo điện thoại trước: viết col-12 (hoặc col) rồi thêm col-md-*, col-lg-* cho màn hình lớn. Cài tiện ích trình duyệt “Responsive Viewer” để xem nhiều kích thước cùng lúc.

Lưu ý

Đặt col trực tiếp trong container mà không có row sẽ mất gutter và căn lề sai; nội dung cũng không được đặt trực tiếp trong row.

Thực hành
  1. Dựng bố cục trang: header, nội dung 8 cột, sidebar 4 cột, footer.
  2. Lưới 8 thẻ: điện thoại 1, máy tính bảng 2, laptop 4 cột.
  3. Căn giữa form đăng nhập bằng offset.
  4. Đảo sidebar lên trên nội dung trên điện thoại bằng order.
Tóm tắt bài học
  • container > row > col; 12 phần mỗi hàng.
  • col-{bp}-{n} áp dụng từ breakpoint trở lên.
  • row-cols-*, g-*, offset-*, order-* điều chỉnh lưới.
  • Dựa trên Flexbox nên dùng được align-items, justify-content.