The previous Bootstrap lesson introduced you to examples of grid systems with classes for small and medium-sized devices. In this lesson, we will continue to explore Large Grid.
The previous Bootstrap lesson introduced you to examples of grid systems with classes for small and medium-sized devices. For example, using two divs (columns) and dividing them proportionally at 25%/75% on small devices and 50%/50% on medium-sized devices:
. .However, on larger devices, the design can be better when split at a 33%/66% ratio. Devices are considered large when the screen width is 992 pixels to 1199 pixels or more.
For larger devices, we will use the class .col-lg-*:
. .
In Bootstrap, for small devices, you'll use the class with -sm- , for medium-sized devices with -md- , and for large devices, -lg- will be used in the class.
The example below will show a split-screen ratio of 25%/75% on small devices, 50%/50% on medium devices, and 33%/66% on large, extra-large, and very large devices:
Bootstrap Example Large Grid
Adjust the size of your browser window to see the change.
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, TipsMake.com.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,. Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác.
For large devices only
In the example below, we only use the class .col-lg-6(without .col-md-*and .col-sm-*). This means that large, very large, and extra-large devices will be split 50%/50%. However, on medium, small, and extra-small devices, it will stack vertically at 100% width.
For example:
Bootstrap Example Resize your browser window to see the change.
Khởi nguồn từ một trang web cung cấp kiến thức về mạng, server, các thiết bị mạng, thủ thuật máy tính. Hiện nay, TipsMake.com.com đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng nhu cầu của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,. Chúng tôi mong muốn các thành viên của mình luôn nắm bắt được những thông tin, kiến thức, xu hướng công nghệ mới nhất, cũng như gỡ rối những vấn đề công nghệ các thành viên gặp phải khi sử dụng máy tính, điện thoại, các thiết bị điện tử thông dụng khác. Các bạn có thể trở thành một phần của TipsMake.com.com bằng cách gửi bài viết, trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội thông qua địa chỉ email hoặc đăng ký tài khoản và đăng bài trực tiếp trên TipsMake.com.com.
Automatic column layout
Bootstrap 5 provides an easy way to create columns with the same width across all devices. Essentially, you just remove the number in the `col` element .col-lg-*and use only the class .col-lg on the specific number of columns. Bootstrap will determine the number of columns present, and they will all have the same width.
If the screen size is smaller than 992px, the columns will accumulate horizontally:
Bootstrap Example Automatic responsive layout column
1 of 2 2 of 2
1 of 4 2 of 4 3 of 4 4 of 4
You do the same as above with the classes for widescreen and ultrawide displays.
Above are some illustrative examples of large grid systems for large screens. Hopefully, this article is helpful to you.