Bootstrap 4 Row and Column Practice

Autumn by the Lake Blurred Golden Background Cracked Earth Texture Pool Water Texture Rose Swan

Steps:

  1. Create an html file which references Bootstrap, either files on the same site or on a CDN.
  2. Put in a heading - the text of the heading should not have any serifs and it should be right up against the left-hand side of the page - if so, you are properly hooked up to Bootstrap
  3. Right click on each image and save it into a folder called images
  4. Create 6 block level opening and closing tags - e.g. <div> or <section>
  5. Insert one of the images between an opening and closing tag - repeat this for the other 5 images, e.g. <div><img></div>
  6. Save the html file and view it in a browser - you will have one image per line, because your tags surrounding the image are block-level tags
  7. Put all the tags created in steps 3 and 4 between a <div class="container> and closing </div>.
  8. After the <div class="container> add a <div class="row"> and after all the images and their associated div tags, put a closing </div> for the row - the 6 images should fit across the page, if the browser viewport is larger enough
  9. Add a class .col-lg-3 to each of the div tags immediately surrounding an image. The result, when viewed in a larger browser viewport (specifically 992px or larger), will be 4 images across, followed by the remaining 2 images across, below.
  10. Restore-down the size of the browser viewport; eventually the layout of images will return to 6 across the page, like before the class .col-lg-3 was added
  11. The col-lg-3 class is defined above the breakpoint, giving each div a width of 25% per the Bootstrap css file beginning around line 1170. Below the breakpoint, the class is not defined, and thus the divs display one per line, because it is a block level element.

Adding additional breakpoints:

  1. To each of the six divs, add a class col-md-4 and a class col-sm-6 to each of the six divs so you will have <div class="col-sm-6 col-md-4 col-lg-3"> or <div class="col-lg-3 col-md-4"> or the classes in any other order-- the order in which the classes are specified in the html does not matter.
  2. The lg class is defined for viewports/screen resolution >=992px and the md class is defined for viewports/screen resolution >= 768px, and the sm class is defined for viewports/screen resolution >= 576px.
  3. Thus below 576, none of the three classes is defined so the pictures stack vertically as before.
  4. From 576 up until 768, the sm classes are defined and the others are not, so there will be two pictures across, as specified by col-sm-6.
  5. From 768 up until 992px, the sm and md classes are defined but the lg classes are not. Both the sm and md classes specify a width, so whichever width specification comes last will override the earlier specification. Since the md classes (defined beginning at line 998) come later, the pictures will be three across, as specified by col-md-4.
  6. For 992px and above, all three classes are defined, so whichever width specification comes last will override the earlier specifications. Since the lg classes are defined later (beginning at line 1170) than the md classes (defined beginning at line 998) and the sm classes (beginning at line 826), the lg class definition of width prevails at this point, so the width of each element is 33% and thus the images will be three across at 992px and above. Thus

    Below 576, stacked vertically
    576- 768 - two across
    768-991 - three across
    992 and above - four across

With picture size assumed to be staying constant, it makes sense to display more pictures across at higher screen resolutions/larger viewports.

Revised: April 25, 2019