In the previous Bootstrap 5 lesson, you learned how to create grids with classes for small screens. However, on medium-sized devices with better designs, the grid is often divided 50%/50%.
In the previous Bootstrap 5 lesson , you learned how to create a grid with classes for small screens. This involves two divs (columns) divided in a 25%/75% ratio:
. .However, on average devices with better designs, the split is usually 50%/50%.
The average device will have a screen width ranging from 768px to 991px.
For average devices, we will use the class .col-md-*:
. .Currently, according to Bootstrap, at small sizes, the class will be used with -sm . At medium sizes, you will use -md- .
The following example will show the results on a small device split at a ratio of 25%/75% and 50%/50% on a medium-sized device:
Bootstrap Example Medium Grid
Adjust the browser window size to see the change.
Giới thiệu về TipsMake.com.com 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.
Use only Medium
In the example below, we only have the same class .col-md-6(no parentheses .col-sm-*). This means that medium, large, extra-large, and XXL devices will be stacked 50%/50%. However, for small and extra-small devices, they will be stacked vertically (100% width):
Bootstrap Example Adjust the browser size to see the change.
Giới thiệu về TipsMake.com.com: 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 layout column
In Bootstrap 5, you have an extremely easy way to create columns with the same width across all devices: just number the columns .col-md-*and use the class .col-mdon specific elements of the `col` element . Bootstrap will determine the number of columns, and they will all have the same width.
If the screen size is smaller than 768px, the columns will be stacked 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
Above are the things you need to know about creating a grid medium in Bootstrap 5. Hopefully, this article is helpful to you.