Hướng dẫn cách chia cột trong bootstrap Update 10/2021

Sau khi bạn đã hiểu rõ hơn về khái niệm bootstrap thì trong quá trình xây dựng giao diện website bạn sẽ gặp phải khó khăn về chia cột cho bố cục website. Và để có thể hiểu rõ hơn về các cơ chế thì bạn cần phải xem qua hệ thống lưới trong bootstrap – Grids System.

Ở bài viết này, Blog Getbootstrap sẽ hướng dẫn bạn chi tiết cách chia cột sau cho tương tác với tỷ lệ màn hình nhất. Mời các bạn cùng tham khảo.

Cách chia cột tương tác tỷ lệ màn hình với bootstrap

Các lệnh bạn cần ghi nhớ khi tiến hành:

  • Lớp .col-xs-*: phù hợp với màn hình smart phone (< 768px)
  • Lớp .col-sm-*: phù hợp với màn hình tablet (>= 768px)
  • Lớp .col-md-*: phù hợp với màn hình laptop, desktop (>= 992px)
  • Lớp .col-lg-*: phù hợp với màn hình desktop (>= 1200px)

Ví dụ code html: Chia 2 cột với tỉ lệ bằng nhau

<body>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-6″>
<div class=”nenxanh”>Cột thứ 1</div>
</div>
<div class=”col-sm-6″>
<div class=”nenhong”>Cột thứ 2</div>
</div>
</div>
</div>
</body>
</html>

Kết quả hình ảnh:

Giao diện hiển thị trên màn hình điện thoại
Giao diện hiển thị trên màn hình PC

Ví dụ code html: chia 2 cột với tỉ lệ 1:2

<body>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-4″>
<div class=”nenxanh”>Cột thứ 1 tỉ lệ 1</div>
</div>
<div class=”col-sm-8″>
<div class=”nenhong”>Cột thứ 2 tỉ lệ 2</div>
</div>
</div>
</div>
</body>

Kết quả hình ảnh:

Giao diện hiển thị trên màn hình điện thoại
Giao diện hiển thị trên màn hình desktop

Ví dụ code html: Chia 3 cột có tỷ lệ bằng nhau trong Bootstrap cũng tương tự như chia 2 cột.

<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>
<div class=”nenxanh”>Cột thứ 1</div>
</div>
<div class=”col-md-4″>
<div class=”nenhong”>Cột thứ 2</div>
</div>
<div class=”col-md-4″>
<div class=”nenvang”>Cột thứ 3</div>
</div>
</div>
</div>
</body>

Kết quả hình ảnh:

Giao diện hiển thị trên màn hình moblie
Giao diện hiển thị trên màn hình desktop

Ví dụ code html: Sử dụng bố cục kết hợp trên nhiều thiết bị di động như desktop, laptop, tablet, smart phone.

  • Thiết bị có độ phân giải từ 1024×728 trở lên, bố cục được chia thành 3 cột (hình 7)
  • Thiết bị có độ phân giải 728×1280, bố cục được chia thành 2 cột (hình 8)
  • Thiết bị có độ phân giải nhỏ hơn 728, bố cục được chia thành 1 cột (hình 9)

<body>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-3 col-md-2″>
<div class=”nenxanh”>Cột thứ 1</div>
</div>
<div class=”col-sm-9 col-md-8″>
<div class=”nenhong”>Cột thứ 2</div>
</div>
<div class=”col-sm-12 col-md-2″>
<div class=”nenvang”>Cột thứ 3</div>
</div>
</div>
</div>
</body>

Kết quả hình ảnh:

Hình 9. Giao diện trên các thiết bị smart phone
Hình 8. Giao diện 2 cột trên tablet quay dọc và các thiết bị nhỏ khác
Hình 7. Giao diện 3 cột trên laptop, desktop và tablet quay ngang sử dụng bootstrap