Container là một phần không thể thiếu trong Bootstrap. Container được sử dụng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng với bố cục của bạn. Container chứa phần tử row và row là container của column (còn được gọi là hệ thống lưới). Container để bao gói các phần nội dung trên website hay tạo các hộp nội dung. | C-n.vn

Container là một phần không thể thiếu trong Bootstrap. Container được sử dụng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng với bố cục của bạn. Container chứa phần tử row và row là container của column (còn được gọi là hệ thống lưới). Container để bao gói các phần nội dung trên website hay tạo các hộp nội dung.

Lý thuyết là như vậy, dễ hình dung nhất, nói theo kiểu nôm na hơn thì Container tạo ra một hộp chứa các phần tử khác bên trong. Chiếc hộp này có chiều rộng được thiết lập theo kích thước của màn hình hiển thị.

Có 2 class container là .container.container-fluid:

  • .container cung cấp các container được fix chiều rộng dựa trên độ rộng của màn hình hiển thị.
  • .container-fluid cung cấp các container với chiều rộng full, mở rộng toàn bộ chiều rộng vừa với vùng xem (viewpoint).

.container

Sử dụng .container để tạo container có chiều rộng thích ứng, fix theo độ rộng của màn hình thiết bị. Lưu ý rằng độ rộng của nó (max-width) sẽ thay đổi theo các kích thước màn hình khác nhau.

READ:  Tính năng Remix on Reels trên Instagram đã được cung cấp tới người dùng để tạo video tương tác với những tài khoản Instagram khác trên Reels. Tính năng này tương tự như tính năng Duet hiện có của TikTok. Khi đó chúng ta có thể kết hợp với video Reels từ tài khoản khác và thêm những chi tiết để sáng tạo video remix đó như khi bạn tạo video Reels trên Instagram. Tuy nhiên người dùng cần lưu ý để có thể remix được video thì phải là video mới được tải lên Reels Instagram nên sẽ có những video bạn không thể remix được. Bài viết dưới đây sẽ hướng dẫn bạn đọc cách dùng tính năng Remix on Reels trên Instagram. | C-n.vn

Bootstrap chia kích thước chiều rộng của màn hình thành 5 loại:

  • Cực nhỏ: Màn hình có chiều rộng nhỏ hơn 576px
  • Nhỏ: Màn hình có chiều rộng lớn hơn hoặc bằng 576px
  • Trung bình: Màn hình có chiều rộng lớn hơn hoặc bằng 768px
  • Rộng: Màn hình có chiều rộng lớn hơn hoặc bằng 992px
  • Cực rộng: Màn hình có chiều rộng lớn hơn hoặc bằng 1200px
Màn hình Cực nhỏ Nhỏ Trung bình Rộng Cực rộng
max-width 100% 540px 720px 960px 1140px

Cụ thể:

  • Nếu chiều rộng màn hình nhỏ hơn 576px, container sẽ có chiều rộng 100%.
  • 576px ≤ chiều rộng màn hình < 768px, container có chiều rộng 540px và hiển thị ở giữa.
  • 768px ≤ chiều rộng màn hình < 992px, container có chiều rộng 720px và hiển thị ở giữa.
  • 992px ≤ chiều rộng màn hình < 1200px, container có chiều rộng 960px và hiển thị ở giữa.
  • Chiều rộng màn hình ≥ 1200px, container có chiều rộng  1140px và hiển thị ở giữa.

Ví dụ về cách sử dụng .container:

<div class="container">
  <h1>Ví dụ về .container</h1>
  <p>Nội dung chi tiết.</p>
</div>

Một file html đầy đủ sẽ như thế này:

<!DOCTYPE html>
<html lang="vi">
<head>
  <title>Ví dụ Bootstrap </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">
  <h1>Quản Trị Mạng</h1>
  <p><strong>Giới thiệu:</strong></p> 
  <p>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,...</p>
  <p>Thay đổi kích thước trình duyệt để xem độ rộng thay đổi như thế nào nhé.</p>
</div>

</body>
</html>

Bạn thử chạy code trên, thay đổi kích thước cửa sổ trình duyệt để xem độ rộng của container đổi như nào nhé.

READ:  Buồn, hay còn gọi là buồn rầu/ buồn bã, một trạng thái tâm lý mà tất cả chúng ta ai cũng có. Và đôi khi chúng ta cũng thấy trạng thái buồn bã này trên cả những con vật dựa trên hành vi của chúng. | C-n.vn

.container-fluid

Bạn sẽ sử dụng class .container-fluid khi cần tạo tạo container với độ rộng full 100%, mở rộng nội dung toàn khung xem của màn hình (width luôn luôn là 100%).

Ví dụ về cách sử dụng .container-fluid:

<div class="container-fluid">
  <h1>Ví dụ về .container-fluid</h1>
  <p>Nội dung văn bản cần trình bày.</p>
</div>

Padding của container

Padding là khoảng cách từ nội dung đến viền của container. Theo mặc định, container có padding trái và phải là 15px, không có padding trên và dưới. Nếu cần thêm padding và margin thì sẽ cần sử dụng các tiện ích khoảng cách để làm cho nội dung hiển thị đẹp hơn. Ví dụ, .pt-5 sẽ thêm 48px cho padding trên.

<div class="container pt-5"></div>

Mình sẽ làm một bài chi tiết về các tiện ích khoảng cách này sau nhé.

Viền và màu sắc của container

Để thêm đường viền hay thay đổi màu sắc cho container chúng ta sẽ sử dụng tiện ích đường viền và màu sắc. Vì khá dài, mình cũng sẽ viết riêng bài sau nhé.

Ví dụ về đường viền và màu sắc container:

<div class="container p-3 my-3 border"></div>

<div class="container p-3 my-3 bg-dark text-white"></div>

<div class="container p-3 my-3 bg-primary text-white"></div>

Giả sử mình có file html dưới đây:

<!DOCTYPE html>
<html lang="vi">
<head>
  <title>Ví dụ Bootstrap </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 p-3 my-3 border">Thêm border cho container - Quantrimang.com</div>

<div class="container p-3 my-3 bg-dark text-white">Ví dụ đổi màu nền container 1 - Quantrimang.com</div>

<div class="container p-3 my-3 bg-success text-white">Ví dụ về đổi màu nền container 2 - Quantrimang.com</div>

</body>
</html>

Khi chạy sẽ được kết quả như này:

READ:  Có hàng tấn chương trình thiết kế đồ họa có sẵn và việc quyết định sử dụng chương trình nào sẽ sử dụng phụ thuộc rất nhiều vào ngân sách của bạn. Vì vậy, trong bài viết này, hãy cùng so sánh Adobe InDesign và Canva để tìm ra đâu là lựa chọn tốt nhất. | C-n.vn

Ví dụ về màu của container

Container thích ứng

Bạn có thể sử dụng các class .container-sm|md|lg|xl để tạo các container thích ứng (responsive, thực tình mình muốn để nguyên là responsive, viết thích ứng còn thấy khó hiểu hơn :().

Khi sử dụng các class này thì độ rộng tối đa max-width của container sẽ thay đổi theo kích thước màn hình hoặc vùng xem:

Màn hình Cực nhỏ

Nhỏ

Trung bình

Rộng

Cực rộng

.container-sm 100% 540px 720px 960px 1140px
.container-md 100% 100% 720px 960px 1140px
.container-lg 100% 100% 100% 960px 1140px
.container-xl 100% 100% 100% 100% 1140px

Cách sử dụng các class này sẽ như sau:

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>

Nếu chưa cài Bootstrap trên máy tính, bạn có thể thử dùng CSS editor online này để xem thử các container hoạt động ra sao nhé.

Bài tiếp: Grid System

  • Max-width, độ rộng tối đa của phần tử trong CSS
  • Icon trong CSS
  • Thiết kế trang web chạy trên nhiều thiết bị (responsive web design) bằng HTML
  • Top 20 mẫu template Bootstrap miễn phí dành cho Admin Dashboard
Xem thêm bài viết thuộc chuyên mục: Công nghệ

Có thể bạn quan tâm