Bài 40: Grid nhỏ trong Bootstrap 5

Chí Vỹ

Tiếp tục bài học về Grid trong Bootstrap 5, chúng ta sẽ tìm hiểu cách làm lưới Grid nhỏ đơn giản nhất. Về cơ bản, cách tạo Grid nhỏ bằng Bootstrap 5 không khó.

Ví dụ tạo Grid nhỏ trong Bootstrap 5

Giả sử chúng ta có một bảng bố cục đơn giản được chia thành hai cột và muốn chia chúng theo tỷ lệ 25%/75% cho các thiết bị nhỏ.

Tiêu chí xác định thiết bị nhỏ sẽ có chiều rộng màn hình từ 576 px tới 767 px.

Trên các thiết bị nhỏ, chúng ta dùng class .col-sm*. Chúng ta sẽ bổ sung class sau vào hai cột:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Ví dụ dưới chia 35%/75% trên các thiết bị nhỏ. Trên những thiết bị siêu nhỏ, nó sẽ tự động xếp chồng lên nhau theo tỷ lệ 100%.

Ví dụ:

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Grid nhỏ</h1>
  <p>Ví dụ sau chia tỷ lệ 25%/75% trên các thiết bị nhỏ, trung bình, lớn, cực lớn và siêu lớn (<strong>576px trở lên</strong>).</p>
  <p>Chỉnh lại kích thước cửa sổ trình duyệt để thấy sự thay đổi.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 bg-primary text-white">
       Giới thiệu về Quantrimang.com
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...
      </div>
      <div class="col-sm-9 bg-dark text-white">
       Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.

Các bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email  hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Grid cho màn hình nhỏ trên Bootstrap

Lưu ý: Đảm bảo tổng số lên tới 12 hoặc ít hơn. Bạn không cần dùng tất cả 12 cột có sẵn.

Nếu muốn chia 33.3%/66.6%, bạn sẽ dùng .col-sm-4 và .col-sm-8, còn chia 50%/50%, bạn sẽ dùng .col-sm-6 và .col-sm-6.

Ví dụ:

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Grid nhỏ</h1>
  <p>Ví dụ sau chia màn hình theo tỷ lệ 33.3%/66.6% trên thiết bị có màn hình từ (<strong>576px trở lên</strong>). Trên thiết bị cực nhỏ, nó sẽ xếp chồng (100% chiều rộng).</p>
  <p>Chỉnh lại cửa sổ trình duyệt để thấy sự thay đổi.</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-4 bg-primary text-white">
       Giới thiệu về Quantrimang.com:
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...
      </div>
      <div class="col-sm-8 bg-dark text-white">
       Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.

Các bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email  hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.
      </div>
    </div>
  </div>
  <br>
  
  <p>Ví dụ này chia Grid theo tỷ lệ 50%/50% trên thiết bị (<strong>576px trở lên</strong>).</p>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-6 bg-primary text-white">
        Giới thiệu về Quantrimang.com:
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, Quantrimang.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,...
      </div>
      <div class="col-sm-6 bg-dark text-white">
        Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.

Các bạn có thể trở thành một phần của Quantrimang.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email  hoặc đăng ký tài khoản và đăng bài trực tiếp trên Quantrimang.com.
      </div>
    </div>
  </div>
</div>

</body>
</html>

Chia grid theo tỷ lệ trên màn hình nhỏ

Cột tự động bố cục

Trong Bootstrap 5, bạn có cách dễ dàng để tạo các cột có cùng chiều rộng trên tất cả thiết bị: chỉ cần loại bỏ số trong .col-sm-* và chỉ dùng class .col-sm trên một số nhất định của phần tử col. Bootstrap sẽ xác định số lượng cột hiện có và mỗi cột sẽ có cùng chiều rộng.

Nếu kích thước màn hình nhỏ hơn 576px, các cột sẽ được xếp chồng theo chiều ngang.

Ví dụ:

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container-fluid mt-3">
  <h1>Cột bố cục tự động đáp ứng</h1>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white">1 of 2</div>
      <div class="col-sm bg-dark text-white">2 of 2</div>
    </div>  
  </div>
  <br>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm bg-primary text-white">1 of 4</div>
      <div class="col-sm bg-dark text-white">2 of 4</div>
      <div class="col-sm bg-primary text-white">3 of 4</div>
      <div class="col-sm bg-dark text-white">4 of 4</div>
    </div>  
  </div>
</div>

</body>
</html>

Cột bố cục tự động đáp ứng bằng Bootstrap 5