The Bootstrap 4 grid system has five tiers of classes: no prefix (phones), sm (tablets), md (desktops), lg (larger desktops), and xl (extra large desktops).
In this example, the column will take up 4 spaces on the medium size and above. On mobile it will take up 12.
<div class="col-md-4">content</div>
Always start with a col class to make a new column. Then specify the grid size (options are listed above) for which you want columns. It will apply to that size and above.
<div class="col-md-4">content</div>
The example below will create 3 columns of equal width on the medium display and larger. If you don’t specify for the smaller displays they will be stacked.
<div class="row">
<div class="col-md">content</div>
<div class="col-md">content</div>
<div class="col-md">content</div>
</div>
By using more than one class for the displays, you can specify the layout for more than one display.
This example makes the two columns 50% of the width on the extra small and small sizes, and then changes them for medium and above.
<div class="row">
<div class="col-6 col-md-8">content</div>
<div class="col-6 col-md-4">content</div>
</div>
Many other classes also work by display sizes (if you need them). In this example, the column contents will be centered on mobile and tablet sizes, but left aligned on desktop.
<div class="col-md-6 text-center text-md-left">content</div>
And in this example, we are making the padding larger on the mobile and tablet display and smaller on the desktop displays.
<div class="col-md-6 p-5 p-md-0">content</div>
Many Bootstrap classes can be used for multiple display sizes.