Bootstrap grid là gì?

Cấu trúc gồm container giới hạn độ rộng nội dung, row chứa các cột, và column chiếm số cột trên tổng 12, ví dụ col-md-4 nghĩa là chiếm 4 trên 12 cột từ màn hình cỡ md trở lên. Bootstrap 5 có sáu mức breakpoint: xs dưới 576px, sm từ 576px, md từ 768px, lg từ 992px, xl từ 1200px và xxl từ 1400px, cùng gutter mặc định 1,5rem tức 24px. Bootstrap xây trên flexbox và theo hướng mobile-first. Người thiết kế làm web cho nhóm dùng Bootstrap nên dựng layout grid trong Figma cùng 12 cột, cùng gutter và độ rộng container, ví dụ 1320px ở mức xxl, để bản thiết kế khớp code. Số 12 được chọn vì chia hết cho 2, 3, 4 và 6. Ví dụ: một hàng ba card dùng col-12 col-md-6 col-lg-4, tức một cột trên điện thoại, hai cột trên máy tính bảng, ba cột trên máy tính. Lỗi thường gặp là thiết kế khối rộng lẻ 5 cột rưỡi mà lưới không thể hiện được.