Container trong Bootstrap 4

Container trong Bootstrap 4

Bài viết này sẽ giới thiệu về Container trong Bootstrap 4, phân biệt các container và cách sử dụng container trong framework này.

Container trong Bootstrap 4

Bạn đã học được từ phần trước rằng Bootstrap yêu cầu một containing element để bọc nội dung trang web.

Containers thường được sử dụng để bọc nội dung bên trong chúng và có 2 container class:

  • .container class cung cấp một container với chiều rộng tương thích (responsive fixed width container).
  • .container-fluid class cung cấp một container có chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của khung nhìn (full width container).
Giới thiệu về Bootstrap 4

Fixed Container

Sử dụng lớp .container để tạo một container có chiều rộng tương thích.

Ghi nhớ rằng chiều rộng của nó (max-width) sẽ thay đổi khi kích thước màn hình khác nhau:

Rất nhỏ<576pxNhỏ576pxVừa768pxLớn992pxRất lớn1200px
max-width100%540px720px960px1140px
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>

Fluid Container

Sử dụng lớp .container-fluid để tạo một container có chiều rộng đầy đủ, trải rộng toàn bộ chiều rộng của khung nhìn (width luôn là 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ó vùng đệm trái và phải là 15px, không có vùng đệm trên và dưới. Do đó, chúng tôi thường sử dụng spacing utilities (tiện ích spacing), như là thêm vùng đệm và khoảng cách lề để giúp trang web nhìn đẹp hơn. Ví dụ, .pt-3 nghĩa là “thêm vào vùng đệm trên 16px”:

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

Container Border và Color

Những tiện ích khác, như là đường viền hay màu sắc thường được sử dụng cùng với containers:

<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>
Container trong Bootstrap 4 1

Responsive Container

Bạn có thể sử dụng .container-sm|md|lg|xl class để tạo một container với chiều rộng tương thích.

max-width của container sẽ thay đổi theo kích thước màn hình/góc nhìn khác nhau:

ClassRất nhỏ<576pxNhỏ576pxVừa768pxLớn992pxRất lớn1200px
.container-sm100%540px720px960px1140px
.container-md100%100%720px960px1140px
.container-lg100%100%100%960px1140px
.container-xl100%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>

Kết luận

Qua đây là một số chia sẻ về Bootstrap, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về Bootstrap.

Các bạn có thể tham khảo các bài viết hay về Bootstrap tại đây.


Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Leave a Reply

Your email address will not be published. Required fields are marked *