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:
.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..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.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>
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>
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>
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:
This container has a border and some extra padding and margins.
This container has a dark background color and a white text, and some extra padding and margins.
This container has a blue background color and a white text, and some extra padding and margins.
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:
Class | Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px |
---|---|---|---|---|---|
.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 |
<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>
Ứng Dụng Học
Theo dõi cập nhật nội dung học trên Youtube & Facebook
Thông Tin Liên Hệ
Công Ty Cổ Phần Công nghệ ZicZac Việt Nam.
Website: https://gozic.vn
SĐT: 096 - 70 25 996
Email: ziczacgroup@gmail.com
Thiết kế webiste chuyên nghiệp
Thiết kế phần mềm quản trị
Thiết kế ứng dụng Android
Thiết kế ứng dụng IOS
Thiết kế Web App
Hỗ trợ Digital Marketing
Hỗ trợ quảng cáo Google Ads
Hỗ trợ quảng cáo Facebook Ads
Hỗ trợ SEO Website