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