Use the Bootstrap Grid to Put Elements Side by Side

Using the example Bootstrap column class, col-md-4, the middle part, md, tells the browser to use this class, this grid layout, when the viewport is medium-sized or higher. The values to choose from are xs (cell phones), sm (tablets), md (desktops), lg (larger desktops), or xl (even larger). If you want to know what the actual breakpoint sizes are in pixels, click here.

The number at the end of the class specifies the width of the column in units, and those units are each 1/12th of whatever their parent container is. So, the class col-md-4 means “make this column four units wide on a twelve unit row” (4/12 or 1/3 of its container’s width) when the viewport is desktop-sized or higher. So, if someone is looking at the page on their cell phone, this grid styling won’t apply.

Because xs is coded as <576px, when you use xs in your Bootstrap column class, you are telling the browser to use this styling on any device a user may be using.

It may also be helpful to note that the content in your col-md-4 column won’t span exactly 1/3 of the width of the row because a little bit of space is taken up by gutters. Bootstrap has coded 15px of padding on both the left and right side of every column. There is also padding on the top and bottom of rows, causing horizontal gutters. If these gutters are getting in the way, you can alter them with Bootstrap’s “no-gutters” class (e.g. <div class=“row no-gutters”>) or add your own css to manipulate the padding or margins the way you want them.