Bootstrap 4 Containers

Short URL: https://gokisoft.com/1243

Containers

Từ bài trước bạn biết rằng Bootstrap yêu cầu một yếu tố container để bọc nội dung trang web.

Containers được sử dụng để đệm nội dung bên trong chúng và có hai class container có sẵn:

1. Class .container cung cấp một container chiều rộng cố định, luôn cách 2 bên màn hình một đoạn nhỏ cố định.
2. Class .container-fluid cung cấp một container chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của màn hình.
.container
.container-fluid

---










---

Fixed Container

Dùng class .container để tạo responsive fixed-width container.

Chú ý chiều rộng (max-width) sẽ thay đổi tùy thuộc kích thước màn hình:

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
max-width	100%	540px	720px	960px	1140px

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Fluid Container

Dùng class .container-fluid để tạo full width container, nó luôn trải dài toàn bộ chiều rộng của màn hình(width:100%):

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

Container Padding

Theo mặc định, containers có phần padding left và right 15px, không có phần padding top hoặc bottom. Vì thế, chúng ta thường sử dụng thêm các khoảng cách, chẳng hạn như thêm padding và margins để làm cho chúng trông đẹp hơn. Ví dụ, .pt-3 có nghĩa "add top padding 16px":

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

Container Border and Color

Các tiện ích khác, chẳng hạn như border và color, cũng thường được sử dụng cùng với các container:

Responsive Containers

Bạn có thể sử dụng các class .container-sm|md|lg|xl để tạo responsive containers.

max-width của container sẽ thay đổi tùy thuộc kích thước màn hình:

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