Bootstrap Grid

Bootstrap Grid (Lưới Bootstrap) là cách nhanh nhất và dễ dàng để tạo bố cục trang web thích ứng.

Bootstrap Grid là gì?

Bootstrap Grid cung cấp một cách dễ dàng và mạnh mẽ để tạo các bố cục trang web thích ứng với mọi hình dạng và kích thước. Nó được xây dựng bằng flexbox với cách tiếp cận ưu tiên thiết bị di động. Ngoài ra, nó hoàn toàn đáp ứng và sử dụng hệ thống mười hai cột (12 cột có sẵn trên mỗi hàng) và sáu cấp phản hồi mặc định.

Bạn có thể sử dụng các lớp được định nghĩa trước của Bootstrap để nhanh chóng tạo bố cục cho các loại thiết bị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay, máy tính để bàn, v.v. Ví dụ: bạn có thể sử dụng các lớp .col-* để tạo cột lưới cho các thiết bị nhỏ hơn như điện thoại di động ở chế độ dọc và các lớp .col-sm-* cho điện thoại di động ở chế độ ngang.

Tương tự, bạn có thể sử dụng các lớp .col-md-* để tạo cột lưới cho các thiết bị màn hình trung bình như máy tính bảng, các lớp .col-lg-* cho các thiết bị như máy tính xách tay nhỏ, các lớp .col-xl-* cho máy tính xách tay và máy tính để bàn và các lớp .col-xxl-* cho màn hình lớn.

Bảng sau đây tóm tắt các tính năng chính của Bootstrap Grid.

Đặc trưng Bootstrap Grid System X-Small (xs)<576px Small (sm)≥576px Medium (md)≥768px Large (lg)≥992px X-Large (xl)≥1200px XX-Large (xxl)≥1400px
Container max-width None (auto) 540px 720px 960px 1140px 1320px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Số cột 12
Chiều rộng rãnh 1.5rem (.75rem ở bên trái và bên phải)
Rãnh tùy chỉnh
Có thể lồng nhau
Thứ tự cột

Bảng trên cho thấy một điều quan trọng, việc áp dụng bất kỳ lớp .col-sm-* nào cho một phần tử sẽ không chỉ ảnh hưởng đến các thiết bị nhỏ mà còn trên các thiết bị vừa, lớn và cực lớn (chiều rộng khung nhìn ≥768px), nếu một lớp .col-md-*, .col-lg-*, .col-xl-* hoặc .col-xxl-* không có mặt.

Tương tự như vậy, lớp .col-md-* sẽ không chỉ có ảnh hưởng đến các thiết bị trung bình mà còn trên các thiết bị lớn và cực lớn nếu một lớp .col-lg-*, .col-xl-* hoặc .col-xxl-* không có mặt.

Bây giờ câu hỏi đặt ra là làm thế nào để tạo hàng và cột bằng cách sử dụng hệ thống lưới thích ứng 12 cột này. Câu trả lời khá đơn giản, lúc đầu hãy tạo một container hoạt động như một trình bao bọc cho các hàng và cột của bạn bằng cách sử dụng bất kỳ lớp container .container nào, sau đó tạo các hàng bên trong container bằng cách sử dụng lớp .row và để tạo các cột bên trong bất kỳ hàng nào, bạn có thể sử dụng các lớp .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-*.col-xxl-*.

Các cột là khu vực nội dung thực tế nơi chúng ta sẽ đặt nội dung của mình. Trong các phần sau, chúng tôi sẽ đưa tất cả những thứ này vào hành động thực tế và xem nó thực sự hoạt động như thế nào:

Tạo bố cục hai cột

Ví dụ sau sẽ hướng dẫn bạn cách tạo bố cục hai cột cho các thiết bị vừa, lớn và cực lớn như máy tính bảng, máy tính xách tay và máy tính để bàn, v.v. Tuy nhiên, trên điện thoại di động (chiều rộng màn hình nhỏ hơn 768px), các cột sẽ tự động trở thành chiều ngang (2 hàng , 1 cột).

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col-md-6">Column left</div>
        <div class="col-md-6">Column right</div>
    </div>
    
    <!--Row with two columns divided in 1:2 ratio-->
    <div class="row">
        <div class="col-md-4">Column left</div>
        <div class="col-md-8">Column right</div>
    </div>
    
    <!--Row with two columns divided in 1:3 ratio-->
    <div class="row">
        <div class="col-md-3">Column left</div>
        <div class="col-md-9">Column right</div>
    </div>
</div>
Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột (.col.col-*) và chỉ các cột là con trực tiếp của hàng (.row). Ngoài ra, các hàng nên được đặt bên trong container (fixed-width hoặc fluid) để có padding và căn chỉnh thích hợp.
Mẹo: Chiều rộng cột lưới được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử cha của chúng. Ngoài ra, mỗi cột có padding ngang (được gọi là máng xối) để kiểm soát không gian giữa các cột riêng lẻ.

Vì Bootstrap Grid dựa trên 12 cột, do đó để giữ các cột trong một hàng (tức là nằm cạnh nhau trên một hàng), tổng số cột của lưới trong một hàng không được lớn hơn 12. Nếu bạn xem qua mã ví dụ trên một cách cẩn thận, bạn sẽ thấy tổng số cột của lưới (tức là col-md-*) đều là 12 (6 + 6, 4 + 8 và 3 + 9) cho mỗi hàng.

Tạo bố cục ba cột

Tương tự, bạn có thể tạo các bố cục khác dựa trên nguyên tắc trên. Ví dụ, ví dụ sau thường sẽ tạo bố cục ba cột cho màn hình máy tính xách tay và máy tính để bàn. Nó cũng hoạt động trong máy tính bảng ở chế độ ngang nếu độ phân giải màn hình lớn hơn hoặc bằng 992 pixel (ví dụ: Apple iPad). Tuy nhiên, ở chế độ dọc, các cột lưới sẽ nằm ngang như bình thường.

<div class="container">
    <!--Row with three equal columns-->
    <div class="row">
        <div class="col-lg-4">Column left</div>
        <div class="col-lg-4">Column middle</div>
        <div class="col-lg-4">Column right</div>
    </div>
    
    <!--Row with three columns divided in 1:4:1 ratio-->
    <div class="row">
        <div class="col-lg-2">Column left</div>
        <div class="col-lg-8">Column middle</div>
        <div class="col-lg-2">Column right</div>
    </div>
    
    <!--Row with three columns divided unevenly-->
    <div class="row">
        <div class="col-lg-3">Column left</div>
        <div class="col-lg-7">Column middle</div>
        <div class="col-lg-2">Column right</div>
    </div>
</div>
Lưu ý: Nếu nhiều hơn 12 cột của lưới được đặt trong một hàng, thì tổng thể mỗi nhóm cột bổ sung sẽ nằm trên một dòng mới.

Các cột bố cục tự động

Bạn cũng có thể tạo các cột có chiều rộng bằng nhau cho tất cả các thiết bị (x-small, small, medium, large, x-large và xx-large) chỉ bằng cách sử dụng lớp .col mà không cần chỉ định bất kỳ số cột nào.

Hãy thử ví dụ sau để hiểu cách hoạt động chính xác của nó:

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
    </div>
    
    <!--Row with three equal columns-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

Ngoài ra, bạn cũng có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó bằng nhau. Bạn có thể sử dụng các lớp lưới được định nghĩa trước hoặc độ rộng nội tuyến.

Nếu bạn thử ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp .col có chiều rộng bằng nhau.

<div class="container">
    <!--Row with two equal columns-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
    </div>
    
    <!--Row with three columns divided in 1:2:1 ratio-->
    <div class="row">
        <div class="col">Column one</div>
        <div class="col-sm-6">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

Column Wrapping Behavior

Bây giờ chúng ta sẽ tạo các bố cục linh hoạt hơn thay đổi hướng cột dựa trên kích thước khung nhìn. Ví dụ sau sẽ tạo bố cục ba cột trên các thiết bị lớn như máy tính xách tay và máy tính để bàn, cũng như trên máy tính bảng (ví dụ: Apple iPad) ở chế độ ngang, nhưng trên các thiết bị trung bình như máy tính bảng ở chế độ dọc (768px ≤ chiều rộng màn hình <992px), nó sẽ thay đổi thành bố cục hai cột trong đó cột thứ ba di chuyển ở cuối hai cột đầu tiên.

<div class="container">
    <div class="row">
        <div class="col-md-4 col-lg-3">Column one</div>
        <div class="col-md-8 col-lg-6">Column two</div>
        <div class="col-md-12 col-lg-3">Column three</div>
    </div>
</div>

Như bạn có thể thấy trong ví dụ trên, tổng số các cột của lưới medium (tức là col-md-*) là 4 + 8 + 12 = 24 > 12, do đó, phần tử <div> thứ ba với lớp .col-md-12 đã thêm cột ngoài 12 cột tối đa trong một hàng (.row), được bao bọc trên một dòng mới là một đơn vị liền kề trên các thiết bị có kích thước màn hình trung bình.

Tương tự, bạn có thể tạo nhiều bố cục thích ứng hơn cho các trang web của mình bằng cách sử dụng tính năng grid column wrapping của Bootstrap.

Tạo bố cục nhiều cột với Bootstrap

Với hệ thống lưới flexbox đầu tiên dành cho thiết bị di động Bootstrap, bạn có thể dễ dàng kiểm soát cách bố cục trang web của mình sẽ hiển thị trên các loại thiết bị khác nhau có kích thước màn hình hoặc khung nhìn khác nhau như điện thoại di động, máy tính bảng, máy tính để bàn, v.v. Hãy xem minh họa sau.

Tạo bố cục nhiều cột với Bootstrap

Trong hình minh họa trên, có tổng cộng 12 hộp nội dung trong tất cả các thiết bị, nhưng vị trí của nó thay đổi tùy theo kích thước màn hình thiết bị, giống như trong thiết bị di động, bố cục được hiển thị dưới dạng bố cục lưới 1 cột và 12 hàng được đặt lên nhau, trong khi trong máy tính bảng, nó được hiển thị dưới dạng bố cục lưới 2 cột và 6 hàng.

Hơn nữa, trong các thiết bị có kích thước màn hình lớn như máy tính xách tay và máy tính để bàn, nó được hiển thị dưới dạng bố cục lưới 3 cột và 4 hàng và cuối cùng trong các thiết bị màn hình cực lớn như máy tính để bàn lớn, nó được hiển thị dưới dạng bố cục lưới 4 cột và 3 hàng.

Bây giờ câu hỏi là làm thế nào chúng ta có thể tạo các bố cục thích ứng như vậy bằng cách sử dụng hệ thống lưới flexbox Bootstrap này. Hãy bắt đầu với thiết bị đích chính. Giả sử thiết bị mục tiêu chính của chúng ta là máy tính xách tay hoặc máy tính để bàn thông thường. Vì bố cục máy tính xách tay của chúng ta có 3 cột và 4 hàng, tức là bố cục lưới 3x4, vì vậy mã HTML để tạo cấu trúc lưới như vậy sẽ trông giống như thế này.

<div class="container-lg">
    <div class="row">
        <div class="col-xl-4"><p>Box 1</p></div>
        <div class="col-xl-4"><p>Box 2</p></div>
        <div class="col-xl-4"><p>Box 3</p></div>
        <div class="col-xl-4"><p>Box 4</p></div>
        <div class="col-xl-4"><p>Box 5</p></div>
        <div class="col-xl-4"><p>Box 6</p></div>
        <div class="col-xl-4"><p>Box 7</p></div>
        <div class="col-xl-4"><p>Box 8</p></div>
        <div class="col-xl-4"><p>Box 9</p></div>
        <div class="col-xl-4"><p>Box 10</p></div>
        <div class="col-xl-4"><p>Box 11</p></div>
        <div class="col-xl-4"><p>Box 12</p></div>
    </div>
</div>
Mẹo: Lớp .container-lg làm cho container rộng 100% nếu chiều rộng của khung nhìn nhỏ hơn 992px, do đó sử dụng toàn bộ chiều rộng có sẵn trên các màn hình nhỏ hơn.

Nếu bạn thấy đầu ra của ví dụ trên trong một thiết bị lớn như máy tính xách tay hoặc máy tính để bàn có chiều rộng màn hình hoặc khung nhìn lớn hơn hoặc bằng 1200px nhưng nhỏ hơn 1400px, bạn sẽ thấy bố cục có 3 hàng trong đó mỗi hàng có 4 cột bằng nhau dẫn đến bố cục lưới 3x4.

Bây giờ đã đến lúc tùy chỉnh bố cục của chúng ta cho các thiết bị khác. Trước tiên, hãy bắt đầu bằng cách tùy chỉnh nó cho các thiết bị trung bình như máy tính bảng (768px ≤ chiều rộng khung nhìn < 1200px). Vì trên máy tính bảng, bố cục của chúng ta được hiển thị dưới dạng lưới 2x6 (tức là 2 cột và 6 hàng). Vì vậy, hãy tiếp tục và thêm lớp .col-md-6 vào mỗi cột.

<div class="container-lg">
    <div class="row">
        <div class="col-xl-4 col-md-6"><p>Box 1</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 2</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 3</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 4</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 5</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 6</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 7</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 8</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 9</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 10</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 11</p></div>
        <div class="col-xl-4 col-md-6"><p>Box 12</p></div>
    </div>
</div>
Mẹo: Để thuận tiện, hãy chọn thiết bị mục tiêu chính của bạn và tạo bố cục cho thiết bị đó trước sau đó thêm các lớp để làm cho thiết bị thích ứng với các thiết bị khác.

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn, chẳng hạn như màn hình máy tính để bàn lớn bằng cách thêm lớp .col-xxl-3 trên mỗi cột, vì mỗi hàng trong bố cục đó chứa 4 cột (tức là bố cục lưới 4x3). Đây là mã cuối cùng sau khi kết hợp toàn bộ quá trình.

<div class="container-lg">
    <div class="row">
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 1</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 2</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 3</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 4</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 5</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 6</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 7</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 8</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 9</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 10</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 11</p></div>
        <div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 12</p></div>
    </div>
</div>
Mẹo: Theo hình minh họa trên, không cần tùy chỉnh bố cục cho điện thoại di động; vì các cột trên các thiết bị nhỏ hơn sẽ tự động nằm ngang và được hiển thị dưới dạng bố cục lưới cột 1x12 khi không có lớp .col-* hoặc .col-sm-*.

Các cột lồng nhau

Các cột của Bootstrap Grid cũng có thể lồng vào nhau, có nghĩa là bạn có thể đặt các hàng và cột bên trong một cột hiện có. Tuy vậy, công thức đặt các cột sẽ giống nhau, tức là tổng số cột phải bằng 12 hoặc nhỏ hơn trong một hàng.

<div class="container">
    <div class="row">
        <div class="col-sm-8">Column left</div>
        <div class="col-sm-4">
            <!--Column right with nested rows and columns-->
            <div class="row">
                <div class="col-12"></div>
            </div>
            <div class="row">
                <div class="col-6"></div>
                <div class="col-6"></div>
            </div>
        </div>
    </div>
</div>

Tạo các cột có chiều rộng biến đổi

Bạn có thể sử dụng lớp col-{breakpoint}-auto để chỉ định kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

<div class="container">
    <div class="row justify-content-md-center">
        <div class="col-md-3">Column left</div>
        <div class="col-md-auto">Variable width column</div>
        <div class="col-md-3">Column right</div>
    </div>
    <div class="row">
        <div class="col">Column left</div>
        <div class="col-auto">Variable width column</div>
        <div class="col">Column right</div>
    </div>
</div>

Căn chỉnh cột

Bạn có thể sử dụng tiện ích căn chỉnh flexbox để căn chỉnh các cột theo chiều dọc và chiều ngang bên trong vùng chứa. Hãy thử các ví dụ sau để hiểu cách hoạt động của nó:

Căn chỉnh theo chiều dọc của cột

Bạn có thể sử dụng các lớp .align-items-start, .align-items-center.align-items-end để căn chỉnh các cột theo chiều dọc ở trên cùng, giữa và dưới cùng của một vùng chứa tương ứng.

<div class="container">
    <div class="row align-items-start">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
    <div class="row align-items-center">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
    <div class="row align-items-end">
        <div class="col">Column one</div>
        <div class="col">Column two</div>
        <div class="col">Column three</div>
    </div>
</div>

Các cột riêng lẻ bên trong một hàng cũng có thể được căn chỉnh theo chiều dọc. Đây là một ví dụ:

<div class="container">
    <div class="row">
        <div class="col align-self-start">Column one</div>
        <div class="col align-self-center">Column two</div>
        <div class="col align-self-end">Column three</div>
    </div>
</div>
Lưu ý: Bạn có thể bỏ qua số trong lớp .col-* và chỉ sử dụng lớp .col để tạo các cột có kích thước bằng nhau cho tất cả các thiết bị (extra small, small, medium, large và extra large).

Căn chỉnh theo chiều ngang của cột

Bạn có thể sử dụng các lớp .justify-content-start, .justify-content-center.justify-content-end để căn chỉnh các cột theo chiều ngang ở bên trái, trung tâm và bên phải của một vùng chứa tương ứng. Hãy xem ví dụ sau để xem nó hoạt động như thế nào:

<div class="container">
    <div class="row justify-content-start">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-end">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
</div>

Ngoài ra, bạn có thể sử dụng lớp .justify-content-around để phân phối đồng đều các cột với khoảng cách nửa kích thước ở hai đầu, trong khi bạn có thể sử dụng lớp .justify-content-between để phân phối đồng đều các cột ở vị trí cột đầu tiên đặt ở đầu và cột cuối cùng được đặt ở cuối. Hãy thử ví dụ sau để xem nó thực sự hoạt động như thế nào:

<div class="container">
    <div class="row justify-content-around">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
    <div class="row justify-content-between">
        <div class="col-4">Column one</div>
        <div class="col-4">Column two</div>
    </div>
</div>

Sắp xếp thứ tự các cột

Bạn thậm chí có thể thay đổi thứ tự trực quan của các cột của mình mà không thay đổi thứ tự của chúng trong code. Sử dụng lớp .order-last để sắp xếp cột cuối cùng, trong khi sử dụng lớp .order-first để sắp xếp cột ở vị trí đầu tiên. Hãy xem một ví dụ:

<div class="container">
    <div class="row">
        <div class="col order-last">First, but ordered at last</div>
        <div class="col">Second, but unordered</div>
        <div class="col order-first">Last, but ordered at first</div>
    </div>
</div>

Bạn cũng có thể sử dụng các lớp .order-* để sắp xếp các cột tùy thuộc vào số thứ tự. Cột có số thứ tự cao hơn đứng sau cột lưới có số thứ tự thấp hơn hoặc cột không có lớp thứ tự. Nó bao gồm hỗ trợ từ 1 đến 12 trên tất cả năm cấp lưới.

<div class="container">
    <div class="row">
        <div class="col order-4">First, but ordered at last</div>
        <div class="col">Second, but ordered at first</div>
        <div class="col order-1">Last, but ordered at second</div>
    </div>
</div>

Bù cột

Bạn cũng có thể di chuyển các cột sang bên phải cho mục đích căn chỉnh bằng cách sử dụng các lớp bù cột như .offset-sm-*, .offset-md-*, .offset-lg-*, v.v.

Các lớp này bù trừ các cột bằng cách tăng lề trái của nó theo số cột được chỉ định. Ví dụ, lớp .offset-md-4 trên cột .col-md-8 sẽ di chuyển nó sang bên phải trên bốn cột từ vị trí ban đầu của nó. Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

<div class="container">
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-8"></div>
    </div>
    <div class="row">        
        <div class="col-sm-8 offset-sm-4"><!--Column with 4 columns offset--></div>
    </div>
</div>

Bạn cũng có thể bù trừ các cột bằng cách sử dụng các lớp tiện ích margin. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không được cố định. Đây là một ví dụ:

<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4 ms-auto"><!--Offset this column to right--></div>
    </div>
    <div class="row">
        <div class="col-auto me-auto"></div>
        <div class="col-auto"><!--Move this column away from previous column--></div>
    </div>
</div>
Lưu ý: Bạn có thể sử dụng lớp .col-auto để tạo các cột chỉ chiếm nhiều không gian khi cần thiết, tức là các cột có kích thước dựa trên nội dung.

Tạo các cột nhỏ gọn

Bạn có thể loại bỏ máng xối mặc định giữa các cột để tạo bố cục nhỏ gọn bằng cách thêm lớp .g-0 vào .row. Lớp này loại bỏ các lề âm khỏi hàng và khoảng đệm ngang khỏi tất cả các cột con ngay lập tức. Đây là một ví dụ:

<div class="row g-0">
    <div class="col-4">Column one</div>
    <div class="col-4">Column two</div>
    <div class="col-4">Column three</div>
</div>

Ngắt các cột thành một hàng mới

Bạn cũng có thể tạo các cột có chiều rộng bằng nhau kéo dài nhiều hàng bằng cách chèn một thẻ <div> với lớp .w-100 nơi bạn muốn các cột ngắt thành một hàng mới. Ngoài ra, bạn có thể làm cho các ngắt này trở nên thích ứng bằng cách kết hợp lớp .w-100 với các lớp tiện ích hiển thị thích ứng .

<div class="container">
    <!-- Break columns on all devices -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
    <!-- Break columns on all devices except extra large devices -->
    <div class="row">
        <div class="col">.col</div>
        <div class="col">.col</div>
        <div class="w-100 d-xl-none"></div>
        <div class="col">.col</div>
        <div class="col">.col</div>
    </div>
</div>

Chúng tôi hy vọng bạn đã hiểu những điều cơ bản về Bootstrap 5 Grid mới. Trong vài chương tiếp theo, bạn sẽ học cách tạo bố cục trang web cơ bản bằng cách sử dụng hệ thống lưới flexbox này.

BootstrapBootstrap Cơ Bản
Bài Viết Liên Quan:
Bootstrap Toast
Trung Nguyen 14/04/2022
Bootstrap Toast

Trong hướng dẫn này, bạn sẽ học cách sử dụng thành phần Bootstrap toast để tạo thông báo.

Bootstrap ScrollSpy
Trung Nguyen 13/04/2022
Bootstrap ScrollSpy

Trong hướng dẫn này, bạn sẽ học cách tạo scrollspy với Bootstrap.

Bootstrap Typeahead
Trung Nguyen 13/04/2022
Bootstrap Typeahead

Trong hướng dẫn này, bạn sẽ học cách tạo gợi ý cho các trường đầu vào bằng Bootstrap typeahead.

Bootstrap Carousel
Trung Nguyen 12/04/2022
Bootstrap Carousel

Trong hướng dẫn này, bạn sẽ học cách tạo Bootstrap Carousel.