Bootstrap 4

Bootstrap: Container

Posted on by HKT

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 và .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).

Nội dung chính về container

  • .container
  • .container-fluid
  • Padding của container
  • Viền và màu sắc của container
  • Container thích ứng

.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.

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


Nếu chiều rộng màn hình nhỏ hơn 576px, container sẽ có chiều rộng 100%.Cụ thể:

  • 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é.

.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:

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:

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>