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
Autumn by the lake is one of the prettiest times of the year
Golden Background
Sometimes a blurry background can look better
Cracked Earth Texture
If we don't get more rain, the ground might look like this
Pool Water Texture
This is refreshing looking
Rose
A rose by any other name -- how does the rest go?
Swan
The swan looks so peaceful
Single Column Class: Two Layouts
Autumn
Autumn by the lake is one of the prettiest times of the year
Golden Background
Sometimes a blurry background can look better
Cracked Earth Texture
If we don't get more rain, the ground might look like this
Pool Water Texture
This is refreshing looking
Rose
A rose by any other name -- how does the rest go?
Swan
The swan looks so peaceful
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
Autumn by the lake is one of the prettiest times of the year
Golden Background
Sometimes a blurry background can look better
Cracked Earth Texture
If we don't get more rain, the ground might look like this
Pool Water Texture
This is refreshing looking
Rose
A rose by any other name -- how does the rest go?
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
Autumn by the lake is one of the prettiest times of the year
Golden Background
Sometimes a blurry background can look better
Cracked Earth Texture
If we don't get more rain, the ground might look like this
Pool Water Texture
This is refreshing looking
Rose
A rose by any other name -- how does the rest go?
Swan
The swan looks so peaceful
Revised: April 30, 2019