Responsive Design with Bootstrap - Rows and Columns in Bootstrap 4

Understanding Bootstrap containers (discussed previously), rows, and columns is important in understanding how Bootstrap implements responsive designs, that is, designs where the layout depends on the screen resolution and size of the browser viewport..

Bootstrap Rows

To understand this last point, we will construct a simple example in the absence of columns. We will construct two containers, the first without a row and the second with a row.

This is a class="container-fluid" without any rows. The 15 pixels of padding on the left and right side of the text is apparent.
This is a class="container" without any rows. The container class also specifies 15 pixels of padding on either side. However, in the previous case (container-fluid), the boundaries (which includes the padding) extend to the width of the viewport, whereas in the current case, the width of the container does not extend to the width of the viewport because the width is fixed for viewport sizes within a given range.

This is a container-fluid with a row, specified by div class="row". In this document, I have added a border-color:red to the Bootstrap class .row so that the rows will be apparent. As you can see, there are no longer 15 pixels of space on either side. If you view this page in Chrome, and right click in the page, and choose Inspect>Elements, first click on the div with the class="container-fluid" and you will see the specifications in the Styles tab at the right :padding:right: 15px; padding:left: 15px;

If you then click on <div> with the class="row" you will see the following in the Styles tab: margin-right:  -15px; margin-left:  -15px;

What the <div class="row"> does is to prepare for the addition of columns;; the negative margins cancel out the padding, and thus there is no longer space on either side..

Bootstrap 4 Columns

You create Bootstrap columns by applying Bootstrap classes to block-level elements within a row. The space between the columns (the gutter) will be 30 pixels wide, which results from 15 pixels of padding on each side of the column (see lines 625-626 in the bootstrap.css file). For columns, the classes have a name beginning with col-, followed by a size, which is two letters, followed by a span (a number between 1 and 12 which is the number of columns you want this element to span)., e.g. col-md-4. The size refers to the window size at which this column will convert into a single column layout (this size is called the breakpoint), so that instead of the columns being side by side, they will be stacked vertically.

For the elements in a row, the numbers (the ones between 1 and 12) will typically add to 12, e.g. col-md-4, col-md-4, col-md-4 would be the three columns within a row.

Above the md breakpoint, one would see the contents of the three columns side by side, i.e.

Below the md breakpoint, one would see the content of the three columns stacked vertically, i.e.



Notes: (1) These diagrams are not meant to convey the absolute width of the columns, for example the width of a column when it is side by side could well exceed the width of a column when it is stacked vertically, because the latter could occur on a much smaller screen.
(2) Both of these examples above are not constructed with Bootstrap classes, are not responsive designs, and thus will not display differently as the screen width changes. They are intended to show how a page constructed with Bootstrap classes would show up side by side in some window sizes and stacked vertically in other sizes. The behavior of actual Bootstrap classes is shown later in this document.


The Bootstrap 4 breakpoints, class definitions, and column widths are shown in the following table:

  Extra Small Small Medium Large Extra Large
  <576px >=576px >=768px >=992px >=1200px
Grid behavior Horizontal at all times Stacked to start, horizontal above breakpoints
Max Container width None (auto) 540px 720px 960px 1140px
Column class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

To see how this works in practice we will create below a single column with a class of .col-md-6. (For now we are violating our guideline above that the numbers will add to 12).

To make clear the screen size at which this switch occurs (the md breakpoint), I have added some JavaScript to display immediately below the size of the window as it is resized; You can also see the behavior at different screen resolutions by displaying this page in Dreamweaver in Live View and clicking on the Visual Media Query bars at the top or by using the Visual Media Query bars in Chrome (instruction on the latter are provided at the end of this document).

Width of window:px

We create a container, then create a row inside the container, and then create a div with a class="col-md-6". It's helpful to also add a background color so the width ot the item is clear. Make sure you resize the window to see how the size changes above and below the breakpoint.
We create a container, then create a row inside the container, and then create a div with a class="col-md-6". It's helpful to also add a background color so the width ot the item is clear. Make sure you resize the window to see how the size changes above and below the breakpoint.

Now let's change the class definition to col-md-2 below. Now if the screen size is above the md breakpoint, it displays as only 2 out of the 12 available columns 

We create a container, then create a row inside the container, and then create a div with a class="col-md-2". It's helpful to also add a background color so the width of the item is clear.

Now we will add two more of the same and you can see that together they will take up half of the window above the md breakpoint, and be stacked vertically below the breakpoint:

We use the existing container, then create a row inside the container, and then create a div with a class="col-md-2". It's helpful to also add a background color so the width ot the item is clear.
We use the existing container, then create a row inside the container, and then create a div with a class="col-md-2". It's helpful to also add a background color so the width ot the item is clear.
We use the existing container, then create a row inside the container, and then create a div with a class="col-md-2". It's helpful to also add a background color so the width ot the item is clear.

 

 

Width of window:px

To utilize the entire window, the sizes need to add up to 12, so let's use the three we just created and change the classes to col-md-4 and omit the background color. So again, we will see three columns across above the breakpoint, and the three columns stacked vertically below the breakpoint.

We use the existing container, then create a row inside the container, and then create a div with a class="col-md-4".
We use the existing container, then create a row inside the container, and then create a div with a class="col-md-4".
We use the existing container, then create a row inside the container, and then create a div with a class="col-md-4".

Now if we change the class from md to xs, they will always take up three columns. In the table above, this is what is meant that the grid behavior is "Horizontal at all times" for the -xs size.

We use the existing container, then create a row inside the container, and then create a div with a class="col-xs-4".
We use the existing container, then create a row inside the container, and then create a div with a class="col-xs-4".
We use the existing container, then create a row inside the container, and then create a div with a class="col-xs-4".

In recent versions of Google Chrome, you can see how your page will look in various devices and how it will look at various screen resolutions. To do this, click the three dot menu at the upper right and select More Tools>Developer Tools. If the media queries are not showing, click the lower three dot menu and select "Show Media Queries". If you do not see the lower three dot menu, click the "Toggle device toolbar" (the second icon from the left in the Elements, Console, etc. window at the bottom.

The final example below shows that Bootstrap columns must be created out of block level elements. Here I attempt to use span instead:

We use the existing container, then create a row inside the container, and then create a span with a class="col-md-4". We use the existing container, then create a row inside the container, and then create a span with a class="col-md-4". We use the existing container, then create a row inside the container, and then create a span with a class="col-md-4".
Above the md breakpoint, we get the side-by-side columns as before, but below the breakpoint, the elements do not stack vertically.

 

 

Revised: 4/25/19, based on lynda.com course "Bootstrap 3 Essential Training" and updated with Bootstrap 4 documentation