Bootstrap 4 - Bootstrap Container

Bootstrap Container

Trong HTML, một container là một phần tử có thể chứa các phần tử khác, chẳng hạn như <div>, <span>, .. Lớp .container hoặc .container-fluid có thể được sử dụng cho các phần tử này. OK bây giờ tôi sẽ giải thích cho bạn sự khác biệt của 2 lớp trên

Lớp container được sử dụng để tạo nội dung đóng hộp.

Có hai lớp container trong Bootstrap:

  1. container
  2. container-fluid

 Lớp .container-fluid khi được áp dụng cho một phần tử sẽ làm cho phần tử này có chiều rộng 100%.

 

Ví dụ:

<h4>.container-fluid Example</h4>

<div class="container-fluid" style="background: #cdd;">
.container-fluid
</div>

Xem ví dụ

Kết quả:

Class .container

Với clas này thì nó sẽ dựa vào kích thước chiều rộng màn hình của các thiết bị, và với bootstrap thì chúng ta chia làm 5 loại:

  • Với các thiết bị có chiều rộng nhỏ hơn 567px được coi là Extra small
  • Với các thiết bị có chiều rộng lớn hơn hoặc bằng 567px được coi là Small hay sm
  • Với các thiết bị có chiều rộng lớn hơn hoặc bằng 768px được coi là Medium hay md
  • Với các thiết bị có chiều rộng lớn hơn hoặc bằng 992px được coi là Large hay lg
  • Với các thiết bị có chiều rộng lớn hơn hoặc bằng 1200px được coi là Extra Large hay xl

 Ví dụ:

<h4 style="color:#ff9249">.container Example:</h4>

<div class="container" style="background: #cdd;">
.container
</div>

Xem ví dụ


Với Ví dụ 1: Chiều rộng màn hình thiết bị nhỏ hơn 567px, khi đó phần từ sẽ có chiều rộng 100%

Class .container

Với Ví dụ 2: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 567px và nhỏ hơn 768px thì phần từ sẽ được hiển thị ở giữa và có chiều rộng là 567px

Class .container

Với Ví dụ 3: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 768px hay nhỏ hơn 992px thì phần từ sẽ hiển thị ở giữa và có chiều rộng 768px

Class .container

Với Ví dụ 4: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 992px và nhỏ hơn 1200px thì phần tử hiển thị ở giữa và có chiều rộng 992px

Với Ví dụ 5: Chiều rộng màn hình thiết bị lớn hơn hoặc bằng 1200px thì phần tử sẽ hiển thị ở giữa và có chiều rộng là 1200px.