Adding columns to your layout

Before we jump into actually adding the columns, let's talk a little bit about the different column classes you have at your disposal with Bootstrap. In Bootstrap 3 there were four different column class widths to choose from: extra small, small, medium, and large. With Bootstrap 4, they have also introduced a new extra large column class. This is likely to allow for extra large monitors, like you would find on an iMac. Let's go over the fine points of each column class in Bootstrap 4.

Extra small

The smallest of the grid classes uses the naming pattern .col-xs-#, where -# is equal to a number from 1 to 12. Remember, in Bootstrap, your row must be divided into a number of columns that adds up to 12. A couple of examples of this would be .col-xs-6 or .col-xs-3. The extra small column class is for targeting mobile devices that have a max-width of 544 pixels.

Small

The small column class uses the syntax pattern .col-sm-#, and some examples of that would...