Multiple Column Classes Applied to an Element

So far we have examined on the case of a single column class being applied to an element. As we have seen In this case, above the breakpoint for the class, the elements go side by side to the extent there is room; below the breakpoint, the elements stack vertically, so one gets two layouts.

However, it is often useful to have more than two layouts, e.g. a layout for phones, another for tablets, and a third for laptops/desktops. This can be achieved in Bootstrap by applying multiple column classes to an element, as shown below.

In our first example, no classes are applied to the block level element, so they stack vertically. Placing the block level elements, in this case section tags, within a row changes their behavior, which will be addressed in a later document

Photos Stacked Vertically (No Change in Layout When Screen Resolution Changes)

The content immediately below has a Bootstrap row in which there are 6 section tags, and in each section there is an image, a heading, and a brief description. With just this structure, the 6 sections will be stacked vertically because section is a block-level element.
Autumn by the Lake

Autumn

Autumn by the lake is one of the prettiest times of the year

Blurred Golden Background

Golden Background

Sometimes a blurry background can look better

Cracked Earth Texture

Cracked Earth Texture

If we don't get more rain, the ground might look like this

Pool Water Texture

Pool Water Texture

This is refreshing looking

Rose

Rose

A rose by any other name -- how does the rest go?

Swan

Swan

The swan looks so peaceful

Single Column Class: Two Layouts

 

One Column Class Per Element: Two Layouts Potentially Result (Q. Why say "Potentially"?)

Width: px
I then add a class col-md-4 to each of the sections and I've also include JavaScript that will show the width of the screen as it is resized. Above the md breakpoint (768 pixels in Bootstrap 4, 992 pixels in Bootstrap 3), the col-md classes are defined (a col-md-4 would have a width of 33.3%, with each section will take up 4 of the 12 columns; below the md breakpoint, the images will be stacked because the col-md classes are not defined. (For some reason I don't understand, above the 1200px, the swan moves down in the fixed width container, and behaves strangely in the container-fluid between 1150 and 1200 pixels)

Autumn by the Lake

Autumn

Autumn by the lake is one of the prettiest times of the year

Blurred Golden Background

Golden Background

Sometimes a blurry background can look better

Cracked Earth Texture

Cracked Earth Texture

If we don't get more rain, the ground might look like this

Pool Water Texture

Pool Water Texture

This is refreshing looking

Rose

Rose

A rose by any other name -- how does the rest go?

Swan

Swan

The swan looks so peaceful

Two Column Classes Per Element: Three Layouts Potentially Result

Width: px

Suppose we add another class, col-sm-6. The col-sm classes are defined in devices with a screen resolution of 576 pixels or larger in Bootstrap 4. This will mean that the pictures will be two across from 576-768 pixels because the col-md classes are not defined in this range. . However, at 768 pixels and above, both the col-sm-6 and the col-md-4 class are defined. The latter overrides the former because it is defined later in the bootstrap.css stylesheet.

In html, it does not matter which class is applied first, e.g. <div class="col-sm-6 col-md-4"> has the same effect as <div class="col-md-4 col-sm-6"> but it does matter which class is defined first in the stylesheet(s). Both classes are defining the width of elements; in col-sm-6, max-width is defined as 50% (line 867) (Bootstrap 4.3.1) whereas in col-md-4, max-width is defined as 33.3% (line 1030). So since both classes are defining max-width above the 768 pixel breakpoint (for Bootstrap 4), the latter one overrides the former and so the col-md-4 definition applies above this breakpoint.

Photos

Autumn by the Lake

Autumn

Autumn by the lake is one of the prettiest times of the year

Blurred Golden Background

Golden Background

Sometimes a blurry background can look better

Cracked Earth Texture

Cracked Earth Texture

If we don't get more rain, the ground might look like this

Pool Water Texture

Pool Water Texture

This is refreshing looking

Rose

Rose

A rose by any other name -- how does the rest go?

Swan

Swan

The swan looks so peaceful

Three Column Classes Per Element: Four Layouts Potentially Result

Width: px

Finally, below I add a large breakpoint, col-lg-2 so we now have three classes applied (class="col-md-4 col-sm-6 col-lg-2"), so above 992 pixels, they will display 6 across and the behavior below that point will be as above:

992 and above - 6 across
768-991 - 3 across
576-768 - 2 across
below 576 - one across

.

Photos

Autumn by the Lake

Autumn

Autumn by the lake is one of the prettiest times of the year

Blurred Golden Background

Golden Background

Sometimes a blurry background can look better

Cracked Earth Texture

Cracked Earth Texture

If we don't get more rain, the ground might look like this

Pool Water Texture

Pool Water Texture

This is refreshing looking

Rose

Rose

A rose by any other name -- how does the rest go?

Swan

Swan

The swan looks so peaceful

Revised: April 30, 2019