Bài 42: Grid Large trong Bootstrap 5
Phần bài học Bootstrap trước đã giới thiệu cho bạn những ví dụ về hệ thống lưới với các class cho thiết bị nhỏ và trung bình. Ví dụ sử dụng hai div (cột) và chia chúng theo tỷ lệ 25%/75% trên thiết bị nhỏ và 50%/50% trên thiết bị trung bình:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Nhưng trên thiết bị lớn, thiết kế có thể tốt hơn khi được chia theo tỉ lệ 33%/66%. Những thiết bị được xem là lớn khi có chiều rộng màn hình từ 992 pixel tới 1199 pixel trở lên.
Đối với các thiết bị lớn, chúng ta sẽ dùng class .col-lg-*
:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Trong Bootstrap, ở thiết bị nhỏ, bạn sẽ dùng class với -sm-, trung bình là -md-, còn ở kích thước lớn, -lg- sẽ được dùng trong class.
Ví dụ dưới đây sẽ cho kết quả chia màn hình theo tỉ lệ 25%/75% trên thiết bị nhỏ, 50%/50% trên thiết bị trung bình và 33%/66% trên thiết bị lớn, siêu lớn và cực lớn:
<!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 lớn</h1>
<p>Điều chỉnh 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 col-md-6 col-lg-4 bg-primary text-white">
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 col-md-6 col-lg-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.
</div>
</div>
</div>
</div>
</body>
</html>
Chỉ dành cho thiết bị lớn
Ở ví dụ bên dưới, chúng ta chỉ dùng class .col-lg-6
(không có .col-md-*
và .col-sm-*
). Điều đó có nghĩa thiết bị lớn, rất lớn và cực lớn sẽ chia theo tỷ lệ 50%/50%. Tuy nhiên, trên thiết bị trung bình, nhỏ, và cực nhỏ, nó sẽ xếp chồng theo chiều dọc với 100% chiều rộng.
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">
<p>Thay đổ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-lg-6 bg-primary text-white">
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-lg-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>
Cột tự động bố cục
Bootstrap 5 cung cấp một cách dễ dàng để tạo các cột có cùng chiều rộng cho tất cả thiết bị. Về cơ bản, bạn chỉ cần bỏ số trong .col-lg-*
và chỉ dùng class .col-lg
trên số cụ thể của phần tử col. Bootstrap sẽ xác định số lượng cột hiện có và tất cả sẽ có cùng chiều rộng.
Nếu kích thước màn hình nhỏ hơn 992px, các cột sẽ cộng dồn theo chiều ngang:
<!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-lg bg-primary text-white">1 of 2</div>
<div class="col-lg bg-dark text-white">2 of 2</div>
</div>
</div>
<br>
<div class="container-fluid">
<div class="row">
<div class="col-lg bg-primary text-white">1 of 4</div>
<div class="col-lg bg-dark text-white">2 of 4</div>
<div class="col-lg bg-primary text-white">3 of 4</div>
<div class="col-lg bg-dark text-white">4 of 4</div>
</div>
</div>
</div>
</body>
</html>
Bạn thực hiện tương tự như trên với các class cho màn hình rộng và siêu rộng.
Trên đây là một số ví dụ minh họa về hệ thống lưới Grid lớn cho màn hình lớn. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 6: Bảng trong Bootstrap 5
-
Cách cài đặt Bootstrap 5 trong React.js
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 38: Hệ thống Grid từ xếp chồng tới nằm ngang trong Bootstrap 5
-
Bài 11: Button Group trong Bootstrap 5
-
Bài 12: Badge trong Bootstrap 5
-
Bài 39: Những kiểu Grid cực nhỏ trong Bootstrap 5
-
Bài 9: Alert trong Bootstrap 5
-
Bài 41: Grid Medium trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Khối D01 thi môn nào, học ngành nào?
Hôm qua -
Code Wuthering Waves mới nhất 18/05/2025 và hướng dẫn đổi code
3 ngày -
Tổng hợp 1001+ thuật ngữ trong Liên Quân Mobile
2 ngày 7 -
Tại sao khởi động lại router có thể khắc phục được nhiều vấn đề?
Hôm qua -
Cách tìm tài khoản liên kết với địa chỉ email
Hôm qua -
Outlook là gì? Cách sử dụng Outlook cho người mới
2 ngày -
Cách kích hoạt Windows Subsystem for Linux trên Windows
Hôm qua -
Cách thức tỉnh trái ác quỷ Blox Fruit
2 ngày -
Hình nền trắng, ảnh nền trắng đẹp
3 ngày -
19/5 là ngày gì? Ngày 19 tháng 5 năm 1890 là ngày gì?
Hôm qua 6