Bài 40: Grid nhỏ trong Bootstrap 5
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>
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>
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>
Trên đây là những kiểu Grid nhỏ được tạo bằng Bootstrap 5. Hi vọng bài viết hữu ích với các bạn.
Bạn nên đọc
-
Bài 8: Jumbotron trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
Bài 9: Alert trong Bootstrap 5
-
Cách cài đặt Bootstrap 5 trong React.js
-
Bài 5: Màu sắc trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 39: Những kiểu Grid cực nhỏ trong Bootstrap 5
-
Bài 6: Bảng 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
-
20+ cách quay màn hình máy tính, quay màn hình laptop
Hôm qua 20 -
Những lời xin lỗi chân thành nhất
Hôm qua -
Cách xem địa chỉ IP trên máy tính, xem địa chỉ IP Win 10
Hôm qua -
Hàm COUNTIF: Đếm có điều kiện trong Excel
Hôm qua 3 -
Top 100 chip điện thoại mạnh nhất năm 2025
Hôm qua -
Đổi PDF sang Word nhanh, không lỗi font chữ mới nhất 06/09/2025
Hôm qua -
Cách gửi danh thiếp Zalo, chia sẻ danh bạ Zalo trên điện thoại, máy tính
Hôm qua -
Cách đổi dấu chấm thành dấu phẩy trên Google Sheets
Hôm qua -
Phím tắt GTA V, phím điều khiển GTA V trên máy tính
Hôm qua -
Tổng hợp các mã lệnh trong game Đế Chế
Hôm qua