Continuing our lesson on Grids in Bootstrap 5, well learn how to create the simplest small grid. Basically, creating a small grid using Bootstrap 5 isnt difficult.

Continuing our lesson on Grids in Bootstrap 5 , we'll learn how to create the simplest small grid. Basically, creating a small grid using Bootstrap 5 isn't difficult.

Example of creating a small grid in Bootstrap 5

Let's say we have a simple layout table divided into two columns and want to split them in a 25%/75% ratio for smaller devices.

The criteria for defining a small device are a screen width ranging from 576 px to 767 px.

On smaller devices, we use the class .col-sm*. We will add the following class to the two columns:

. .

The example below shows a 35%/75% split on smaller devices. On ultra-small devices, it will automatically stack up at a 100% ratio.

For example:

 Bootstrap Example 

Small grid

The following example shows a 25%/75% scaling ratio across small, medium, large, extra-large, and super-large devices ( 576px and above ).

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. 

Note: Ensure the total number is 12 or fewer. You don't need to use all 12 available columns.

If you want to divide 33.3%/66.6%, you would use . col-sm-4and .col-sm-8, and if you want to divide 50%/50%, you would use .col-sm-6and .col-sm-6.

For example:

 Bootstrap Example 

Small grid

The following example splits the screen at a ratio of 33.3%/66.6% on devices with screens of ( 576px or larger ). On extremely small devices, it will overlap (100% width).

Adjust your browser window to see the changes.

 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. 

This example divides the grid by a 50%/50% ratio on devices ( 576px and above ).

 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 column layout

In Bootstrap 5, you have an easy way to create columns with the same width across all devices: simply remove the number in .col-sm-*and use the class only .col-smon certain col elements. Bootstrap will determine the number of columns available, and each column will have the same width.

If the screen size is smaller than 576px, the columns will be stacked horizontally.

For example:

 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 some examples of small grid styles created using Bootstrap 5. Hopefully, this article is helpful to you.