Với lập trình web, Bootstrap chắc hẳn là một framework cực kỳ quen thuộc với mỗi chúng ta. Bootstrap giúp xây dựng các website đẹp và linh hoạt hơn đi kèm với đó là giảm tải được rất nhiều công sức viết mã so với thông thường. Hiện tại, với Bootstrap 5, rất nhiều tùy chỉnh cũng như tính năng mới được phát triển và giới thiệu. Nhưng, trong số đó luôn có một khái niệm rất quan trọng và không thể thiếu đó là "Container trong Bootstrap 5". Sau đây, chúng ta sẽ cùng nhau tìm hiểu về Container, lý do khiến cho Container trở nên đặc biệt, cũng như tại sao nó quan trọng trong Bootstrap.

1. Container trong Bootstrap 5 là gì?

Như đã biết, Bootstrap là một framework giúp chúng ta xây dựng các website responsive một cách nhanh chóng, thuận tiện cũng như tiết kiệm nhiều công sức viết mã hơn. Đi kèm với đó là một hệ thống grid với Container là một phần rất quan trọng bên trong nó. Các Container chứa tất cả các thành phần trang web, từ đó giúp chúng ta dễ dàng xác định được chiều rộng của nội dung trên màn hình. Bootstrap 5 cung cấp cho chúng ta 2 loại Container sau:

a. Container: Đây là Container tiêu chuẩn trong Bootstrap 5, nó tạo ra một vùng chứa có kích thước ổn định khi hiển thị trên trang web. Điều này rất quan trọng, bới vì nó sẽ giúp dữ liệu dễ dàng hiển thị, và nội dung cũng sẽ đẹp hơn trên các thiết bị có kích thước màn hình khác nhau. 

b. Container-fluid: Container linh hoạt như Container-fluid sẽ cho phép chúng ta căn chỉnh nội dung theo chiều rộng tối đa của vùng chứa. Điều này phù hợp với những trang web, hoặc các phần trong trang web mà ta cần nội dung luôn vừa với vùng chứa nó.

Chúng ta cùng theo dõi kích thước của các Container trong bảng sau:

 Extra small <576pxSmall ≥576pxMedium ≥768pxLarge ≥992pxX-Large ≥1200pxXX-Large ≥1400px
.Container100%540px720px960px1140px1320px
.Container-sm100%540px720px960px1140px1320px
.Container-md100%100%720px960px1140px1320px
.Container-lg100%100%100%960px1140px1320px
.Container-xl100%100%100%100%1140px1320px
.Container-xxl100%100%100%100%100%1320px
.Container-fluid100%100%100%100%100%100%

2. Tại sao Container trong Bootstrap 5 lại quan trọng?

Được xem là nền tảng cần nắm vững khi làm việc với Bootstrap, Container đóng vai trò rất quan trọng trong việc tạo ra một trải nghiệm mượt mà và đẹp mắt cho người dùng cuối. Chúng ta cùng nhau đi qua một số lý do khiến cho Container trở nên quan trọng sau đây:

  • Thiết kế đáp ứng (responsive design): Với Container-fluid ta có thể thiết kế trang web mà không cần quan tâm đến kích thước màn hình cụ thể. Nội dung của trang web sẽ luôn được điều chỉnh phù hợp với mọi thiết bị, màn hình mà người dùng sử dụng. Nó đem lại cho chúng ta sự tự do, thoải mái khi làm việc với các giao diện khác nhau.
  • Kiểm soát vị trí và kích thước: Các Container cố định cho phép chúng ta kiểm soát vị trí cũng như là kích thước nội dung của trang web. Các trường hợp mà chúng ta cần tạo ra các phần tử nổi bật trên trang web, hoặc cũng có thể là những nội dung cố định trên trang web thì nó sẽ thể hiện được sự hữu ích.
  • Tuân thủ các quy tắc thiết kế: Với việc là một framework về giao diện tương tác người dùng, Bootstrap nói chung và Bootstrap 5 nói riêng luôn hướng tới sự thân thiện với người dùng. Góp phần mang lại cho người dùng những trải nghiệm tốt nhất qua các phiên bản. Và với Bootstrap chúng ta có thể sử dụng những quy tắc đó một cách đơn giản và dễ dàng hơn.

>>> Xem thêm bài viết:
- Bootstrap là gì? Hướng dẫn cách sử dụng Bootstrap

- Hướng dẫn kéo và thả trong HTML5

- Một số câu hỏi phỏng vấn dành cho Front-end Developer

3. Sử dụng Container trong Bootstrap 5

Với Container trong Bootstrap 5, nó sẽ cho chúng ta một khung chứa nội dung trang web với kích thước cố định. Thông thường các kích thước này sẽ phụ thuộc vào phiên bản, và sẽ thay đổi theo sự phát triển của xu hướng người dùng cũng như kích thước màn hình tiêu chuẩn theo từng thời điểm khác nhau. Dưới đây ta cũng sẽ tìm hiểu một đoạn mã sử dụng Container:

  • Tạo phần tử html với class Container:
<div class="Container>
    <!-- Nội dung của bạn ở đây -->
</div>
  • Vì Container chỉ là vùng chứa nên chúng ta hoàn toàn có thể thêm các hàng (row), cột (col) hay bất cứ thành phần nào khác bên trong nó.
<div class="Container">
    <div class="row">
        <div class="col-md-6">
            <!-- Nội dung cột 1 -->
        </div>
        <div class="col-md-6">
            <!-- Nội dung cột 2 -->
        </div>
    </div>
</div>
  • Một số ví dụ thực tế:

Ví dụ 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <div class="Container">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 5

Trang Bootstrap sẽ như sau

CÔNG TY CỔ PHẦN STRINGEE

Ví dụ 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body class="bg-primary">
    <div class="Container p-5 mt-5 bg-dark text-white">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>
</html>

 

Bootstrap 5

Trang Bootstrap sẽ như sau

CÔNG TY CỔ PHẦN STRINGEE

Ví dụ 3:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
    <div class="Container mt-3 border">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <div class="Container-sm mt-3 border">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <div class="Container-md mt-3 border">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <div class="Container-lg mt-3 border">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <div class="Container-xl mt-3 border">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <div class="Container-xxl mt-3 border">
        <h1>Trang Bootstrap sẽ như sau</h1>
        <p>CÔNG TY CỔ PHẦN STRINGEE</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>
</body>
</html>

4. Sử dụng Container-fluid trong Bootstrap 5

Khác với Container có kích thước cố định, Container-fluid là Container linh hoạt về chiều rộng, chiều rộng của nó sẽ thay đổi để luôn phù hợp với phần tử chứa nó. Dưới đây là cách mà chúng ta sẽ sử dụng Container-fluid:

  • Tạo phần tử html với class Container-fluid:
<div class="Container-fluid">
    <!-- Nội dung của bạn ở đây -->
</div>
  • Vì Container-fluid cũng là vùng chứa nên chúng ta hoàn toàn có thể thêm các hàng (row), cột (col) hay bất cứ thành phần nào khác bên trong nó.
<div class="Container-fluid">
    <div class="row">
        <div class="col-md-6">
            <!-- Nội dung cột 1 -->
        </div>
        <div class="col-md-6">
            <!-- Nội dung cột 2 -->
        </div>
    </div>
</div>

Tổng kết

Container trong Bootstrap 5 đóng vai trò rất quan trọng trong việc hỗ trợ các lập trình viên tạo ra các trang web đẹp. Sử dụng Container là một bước không thể thiếu để xây dựng website hiện đại, chất lượng và hiệu quả hơn. Bạn cũng có thể tìm hiểu nhiều hơn về Bootstrap 5 trên chính trang chủ của nó tại đây.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy,  Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY: