About boilerplate
An HTML web page contains four parts:
- Doctype
- html root element
-
<head>section -
<body>section
The bsbTop boilerplate contains the Doctype, <html> root element, <head> section, and just the topmost parts of the <body> section—the navbar and the large banner with your blog title and description.
The next section of the bstMainPage template lays out the main .container div of your blog page—everything under the banner and above the footer. This is the Bootstrap responsive element—it varies its width discretely according to the width of the browser window. (To make this variation fluid, change class=container to class=container-fluid).
Immediately inside this is another div, the .row. A Bootstrap .row div is what allows you to use the Bootstrap predefined grid (column) system. Grid columns are created by specifying the number of twelve available columns you wish to span.
There are four classes prefixes: col-xs-, .col-sm-, .col-md-, .col-lg. Columns in xs are always preserved, while those in the others fall back on the setting for the smaller size. If nothing is set for the smaller size, the divs become collapsed-and-stacked.
The columns are laid out in this line of HTML:
<main class="col-sm-8 col-main">
This means that the main area of your blog body (all the stuff on the left) is 8 (out of 12) columns wide.
After the main line, the bstMainPage template begins checking the nature of each note up for export.