Bootstrap 3 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 associates 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-md-4 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 3 images across, followed by the remaining 3 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-md-4 was added
  11. The col-md-4 class is defined above the breakpoint, giving each div a width of 33% per the Bootstrap css file beginning around line 1939. 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-sm-6 to each of the six divs so you will have <div class="col-md-4 col-sm-6"> or <div class="col-sm-6 col-md-4"> -- the order in which the classes are specified in the html does not matter.
  2. The md class is defined for viewports/screen resolution >=992px and the sm class is defined for viewports/screen resolution >= 768px.
  3. Thus below 768px, neither class is defined so the pictures stack vertically as before.
  4. From 768 up until 992px, the sm classes are defined but the md classes are not, so the pictures will be two across, as specified by col-sm-6.
  5. For 992px and above, both the sm and the md classes are defined; both classes specify a width. Thus whichever width specification comes last will override the earlier specification. Since the md classes are are defined later (beginning at line 1939) than the sm classes (defined beginning at line 1777), the md 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 768 - stacked vertically
    768-991 - two across
    992 and above - three 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 9, 2018