Grid Basic trong Bootstrap 5:
Trong Bootstrap 5, hệ thống lưới (grid system) là một phần quan trọng giúp bạn tạo bố cục linh hoạt cho trang web của mình. Hệ thống lưới dựa trên cơ sở của CSS Flexbox và cho phép bạn chia các phần của trang web thành các hàng (rows) và cột (columns), tạo nên bố cục đáp ứng tốt trên các kích thước màn hình khác nhau. Dưới đây là một hướng dẫn cơ bản về cách sử dụng hệ thống lưới trong Bootstrap 5:
Bước 1: Sử dụng lớp container hoặc container-fluid
Trước tiên, bạn cần bọc toàn bộ nội dung của trang web bằng một container hoặc container-fluid để tạo một không gian chứa chung cho hệ thống lưới.
html
<div class="container">
<!-- Nội dung của bạn ở đây -->
</div>
Bước 2: Sử dụng lớp row để tạo hàng
Trong container, bạn sẽ sử dụng lớp “row” để tạo hàng cho các cột. Mỗi hàng chứa các cột với tổng chiều rộng tối đa bằng 12.
html
<div class="container">
<div class="row">
<!-- Các cột sẽ được thêm vào đây -->
</div>
</div>
Bước 3: Sử dụng lớp col để tạo cột
Trong mỗi hàng, bạn có thể sử dụng các lớp “col” để tạo các cột. Các cột có thể có tỷ lệ chiều rộng khác nhau bằng cách sử dụng lớp “col-{kích thước}” (với kích thước từ 1 đến 12).
html
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Nội dung của cột 1 -->
</div>
<div class="col-md-6">
<!-- Nội dung của cột 2 -->
</div>
</div>
</div>
Ví dụ:
Dưới đây là một ví dụ cụ thể về cách sử dụng hệ thống lưới trong Bootstrap 5:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<title>Bootstrap 5 Grid Example</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-6">
<h2>Column 1</h2>
<p>This is the content of column 1.</p>
</div>
<div class="col-md-6">
<h2>Column 2</h2>
<p>This is the content of column 2.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Trong ví dụ trên, chúng ta sử dụng hệ thống lưới để tạo hai cột ngang bằng nhau trên các kích thước màn hình trở lên medium (col-md-6).