Bootstrap 4 Grid Medium

Medium Grid Example

In the previous chapter, we presented a grid example with classes for small devices. We used two divs (columns) and we gave them a 25%/75% split:

But on medium devices the design may be better as a 50%/50% split.

For medium devices we will use the .col-md-* classes:

Now Bootstrap is going to say "at the small size, look at classes with -sm- in them and use those. At the medium size, look at classes with -md- in them and use those".

The following example will result in a 25%/75% split on small devices and a 50%/50% split on medium (and large and xlarge) devices. On extra small devices, it will automatically stack (100%):

Using Only Medium

In the example below, we only specify the .col-md-6 class (without .col-sm-*). This means that medium, large and extra large devices will split 50%/50% - because the class scales up. However, for small and extra small devices, it will stack vertically (100% width):

Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns for all devices: just remove the number from .col-md-* and only use the .col-md class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

If the screen size is less than 768px, the columns will stack horizontally:

The next chapter shows how to add a different split percent for large devices.