Lesson 41: Grid Medium in Bootstrap 5

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.

English example text

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.

English example text

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.