Lesson 39: Ultra-Small Grid Styles in Bootstrap 5

In previous Bootstrap 5 lessons, we learned about the basic grid systems . In this lesson, let's delve deeper into the ultra-fine grid types in Bootstrap !

Example of a Micro-grid Table

For example, on a simple layout with two columns, you want to scale it 25%/75% across all devices. Add the following class to both columns:

. .

The basic code is as follows:

Lorem ipsum.

Sed ut perspiciatis.

For example, on the website TipsMake.com:

 Bootstrap Example 

Ultra-small Grid (Automatic Layout)

The following example will split the screen at a 25%/75% ratio across all devices.

English example text

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

For a 33.3%/66.6% split, you would use .col-4and .col-8. If splitting 50%/50%, you would use .col-6and .col-6.

Sample code:

Lorem ipsum.

Sed ut perspiciatis.

Lorem ipsum.

Sed ut perspiciatis.

Examples on the web:

 Bootstrap Example 

Ultra-small Grid

The following example will show a split-screen ratio of 33.3%/66.6% across all devices.

Adjust the browser window size to see the effect.

English example text

The following example shows 50/50 screen split on all devices.

English example text

Automatic Layout Column

In Bootstrap 5, you have an easy way to create columns of equal width for all devices. Just remove the numbers .col*and use the class .colon only specific numbers of the col elements. Bootstrap will determine the number of columns present, and each column will have the same width.

 1 of 2 2 of 2  1 of 4 2 of 4 3 of 4 4 of 4 

Examples on the web:

English example text
English example text

Above are some examples of microgrids in Bootstrap 5. Hopefully, this article has helped you better understand grids when using Bootstrap.