Grid System (Hệ thống lưới) trong Bootstrap

Grid System (hệ thống lưới) trong Bootstrap được xây dựng với flexbox, cho phép tạo tới 12 cột trên một trang. Nếu bạn không muốn sử dụng tất cả 12 cột riêng biệt thì có thể nhóm chúng lại với nhau để tạo ra những cột rộng hơn.

Hệ thống lưới này là thích ứng, và các cột có thể tự động sắp xếp lại để phù hợp với kích thước của màn hình. Hãy chắc chắn rằng, tổng các cột tối đa là 12 hoặc ít hơn (bạn không nhất thiết phải sử dụng hết tất cả 12 cột).

Grid trong Bootstrap 4

  • Các class của grid
  • Quy tắc dành cho Grid System trong Bootstrap 4
  • Cấu trúc cơ bản của Grid trong Bootstrap 4
  • Tạo 3 cột bằng nhau
  • Cột thích ứng trong Bootstrap 4
  • Tạo 2 cột rộng khác nhau, thích ứng

Các class của grid

Hệ thống grid của Bootstrap 4 có 5 class:

  • .col- (thiết bị cực nhỏ – độ rộng màn hình nhỏ hơn 576px)
  • .col-sm- (thiết bị nhỏ – độ rộng màn hình bằng hoặc lớn hơn 576px)
  • .col-md- (thiết bị trung bình – độ rộng màn hình bằng hoặc lớn hơn 768px)
  • .col-lg- (thiết bị lớn – độ rộng màn hình bằng hoặc lớn hơn 992px)
  • .col-xl- (thiết bị cực lớn – độ rộng màn hình bằng hoặc lớn hơn 1200px)

Các class trên có thể kết hợp với nhau để tạo ra bố cục động và linh hoạt hơn.

Mẹo: Vì class sẽ tăng/giảm theo tỷ lệ, vì vậy nếu muốn đặt cùng độ rộng cho sm và md thì chỉ cần chỉ định sm thôi.

Quy tắc dành cho Grid System trong Bootstrap 4

Grid System trong Bootstrap 4 có vài quy tắc sau:

1. Các hàng phải được đặt trong một .container (fixed-width) hoặc .container-liquid (full-width) để căn chỉnh và padding phù hợp.

2. Sử dụng hàng để tạo các nhóm cột ngang.

3. Nội dung nên được đặt trong các cột và chỉ các cột có thể là con của các hàng.

4. Các lớp được xác định trước như .row.col-sm-4 có sẵn để nhanh chóng tạo bố cục grid.

5. Cột tạo gutter (khoảng cách giữa nội dung cột) thông qua padding. Padding đó được bù đắp theo hàng cho cột đầu tiên và cột cuối cùng thông qua negative margin trên .rows.

6. Các cột lưới được tạo bằng cách chỉ định số lượng cột trong tổng số 12 cột mà bạn muốn tạo. Ví dụ: 3 cột bằng sau sẽ sử dụng 3 .col-sm-4.

7. Độ rộng cột được tính theo tỷ lệ %, vì vậy chúng rất linh hoạt và có kích thước tương ứng với phần tử cha của chúng.

8. Sự khác biệt lớn nhất giữa Bootstrap 3 và Bootstrap 4 là Bootstrap 4 sử dụng flexbox thay vì float. Lợi ích lớn nhất của flexbox là các cột lưới không được chỉ định chiều rộng sẽ tự động bố cục như là các cột có chiều rộng bằng nhau (và chiều cao cũng bằng nhau). Ví dụ: 3 cột với .col-sm, mỗi cột sẽ tự động rộng 33,33% từ điểm dừng (breakpoint) nhỏ trở lên.

Cấu trúc cơ bản của Grid trong Bootstrap 4

Đây là cấu trúc cơ bản của grid trong Bootstrap 4:

<!-- Ví dụ 1: Kiểm soát độ rộng cột và cách chúng xuất hiện trên các thiết bị khác nhau -->
<div class="row"> <!-- Tạo 1 hàng -->
  <div class="col-*-*"></div> 
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Ví dụ 2: Để Bootstrap tự động xử lý bố cục -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Ở ví dụ 1, sau khi tạo 1 hàng, bạn thêm số cột mình cần tương ứng với các class .col-*-*. * đầu tiên là loại class sm, md, lg hoặc xl. * thứ 2 đại diện cho 1 số, tối đa là 12.

Ở ví dụ 2, thay vì thêm một số vào mỗi col, bạn có thể để Bootstrap xử lý bố cục, tạo các cột có chiều rộng bằng nhau: 2 phần tử “col” thì mỗi col là 50%, 3 phần tử col thì mỗi cái có độ rộng là 33.33%, 4 col thì mỗi col là 25%… Bạn có thể sử dụng .col-sm|md|lg|xl để làm cho các cột có tính thích ứng (responsive).

Dưới đây là vài ví dụ cơ bản về bố cục lưới trong Bootstrap 4.

Tạo 3 cột bằng nhau

Ví dụ bên dưới sẽ chỉ cho bạn cách tạo 3 cột có chiều rộng bằng nhau, trên tất cả các thiết bị và độ rộng màn hình.

Bạn cần thêm vào các thẻ div sau:

<div class="row">
  <div class="col">nội dung trong cột</div>
  <div class="col">nội dung trong cột</div>
  <div class="col">nội dung trong cột</div>
</div>

Dưới đây là file html đầy đủ:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>3 cột có độ rộng bằng nhau</h1>
  <p>Lưu ý: Thử thêm div mới với class="col" trong class row - nó sẽ tạo ra 3 cột rộng bằng nhau.</p>
  <div class="row">
    <div class="col" style="background-color:#FFFF00;">.col</div>
    <div class="col" style="background-color:#FFFFE0;">.col</div>
    <div class="col" style="background-color:#FFFF00;">.col</div>
  </div>
</div>

</body>
</html>

Khi chạy file trên ta sẽ có được bố cục như dưới đây:

Cột thích ứng trong Bootstrap 4

Ví dụ dưới đây sẽ chỉ cho bạn biết cách tạo 4 cột có độ rộng bằng nhau bắt đầu từ máy tính bảng và chia tỷ lệ cho những màn hình lớn hơn. Trên điện thoại hoặc màn hình nhỏ hơn 576px, các cột sẽ tự động được xếp chồng lên nhau.

Khi này, bạn cần dùng đến các thẻ div sau:

<div class="row">
  <div class="col-sm-3">nội dung trong cột</div>
  <div class="col-sm-3">nội dung trong cột</div>
  <div class="col-sm-3">nội dung trong cột</div>
  <div class="col-sm-3">nội dung trong cột</div>
</div>

Và file html đầy đủ sẽ là:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Cột thích ứng</h1>
  <p>Thay đổi cửa sổ trình duyệt để thấy sự thay đổi.</p>
  <p>Các cột sẽ tự động chồng lên nhau khi màn hình có chiều rộng nhỏ hơn 576px.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:#FF1493;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#FFC0CB;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#FF1493;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:#FFC0CB;">.col-sm-3</div>
  </div>
</div>

</body>
</html>

Khi chạy file trên bạn sẽ nhận được 2 bố cục khi màn hình rộng hơn 576px, và khi màn hình nhỏ hơn 576px như dưới đây:

Tạo 2 cột rộng khác nhau, thích ứng

Tiếp theo là ví dụ về cách tạo 2 cột có độ rộng khác nhau, bắt đầu từ màn hình máy tính bảng và mở rộng đến những màn hình lớn hơn. Giả sử ta tạo 1 cột sm-4 và 1 sm-8, khi đó bạn sẽ dùng các thẻ div sau:

<div class="row">
  <div class="col-sm-4">nội dung của cột</div>
  <div class="col-sm-8">nội dung của cột</div>
</div>

File html đầy đủ lúc này sẽ như sau:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>2 cột độ rộng khác nhau</h1>
  <p>Thay đổi độ rộng của cửa sổ trình duyệt để xem hiệu ứng.</p>
  <p>Các cột sẽ tự động chồng lên nhau khi màn hình nhỏ hơn 576px.</p>
  <div class="row">
    <div class="col-sm-4" style="background-color:#00CED1;">.col-sm-4</div>
    <div class="col-sm-8" style="background-color:#E0FFFF;">.col-sm-8</div>
  </div>
</div>
    
</body>
</html>

Sau khi chạy file trên, bạn sẽ nhận được 2 bố cục tương ứng với độ rộng màn hình lớn hơn 576px hay nhỏ hơn mức này.