LinkedIn: Dreamweaver CC: Responsive Design with Bootstrap 4 Chap 3 w David Powers
Bootstraps grid layout requires all content to be in a container.
Use the DOM panel to select items and then right-click to 'wrap' You want .container for Navbar as an example. You can change your mind by selecting the tag, right-click and 'remove tag'. You only need a container for Navbar when you want to constrain width. Everything else on the page DOES need a container.
Click the Nav tag then Insert : Bootstrap : Container > After will place the container on a peer level with Nav, after.
In the DOM panel, click on the Div .container, then insert (in the example) Bootstrap Components : Grid Row with Column : Nested Inside and choose your # columns. How much easier to stack columns for narrow screen than the float crap you went through with your new ladybugsrule page! The columns stack at med width , but you can resize them by pulling on the left so that they still lay out horizontally, and that adds a class! Clicking on the small Media Query will stack them again. The middle two letters of the class (.col-lg-4 or .col-md-4) indicate the breakpoints. You can delete the larger class for each column if you like.
Before you add the grid, resize your window to the smallest breakpoint at which you want your columns to not stack. This will ensure that Dreamweaver (or bootstrap?) picks the appropriate class. Recall you don't particularly like that the menu breaks to the smaller menu for your tablet when it's not necessary.
To sum up, when you insert a grid-row with columns, Dreamweaver creates equal sized columns (which you can resize), and the grid class is determined by the width of the document window, which is why you start with the smallest size.
To insert a hero image insert a grid-row with 1 column, so it's responsive at all sizes. Class is .col-12