Lesson 40: Small Grid in Bootstrap 5

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.

English example text

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.

English example text

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

English example text

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.