From the course: Dreamweaver CC: Responsive Design with Bootstrap 4

Add a container for the page content - Dreamweaver Tutorial

From the course: Dreamweaver CC: Responsive Design with Bootstrap 4

Start my 1-month free trial

Add a container for the page content

“

- [Instructor] In this chapter we'll start adding the page content and for that we need a container. So let's begin with an overview of Bootstrap containers. Bootstrap's grid layout requires all content to be in a container. There are two types. A basic container is centered and is fixed width in the sense that it has a max width property that changes at each breakpoint. A fluid container on the other hand always spans the entire width of the viewport with a default horizontal padding of 15 pixels on each side. With a basic container Bootstrap resizes the layout automatically on extra small devices, but uses maximum widths of 540, 720, 960, and 1,140 pixels on larger devices. With the custom layout grid that we created in chapter one the maximum width on a large device would be 928 instead of 960 pixels. So with that explanation out of the way let's get back to Dreamweaver. I plan to use a fluid container for this design, so the fact that the navbar stretches the full width of the viewport is exactly what I want. But let's say you prefer a centered design that has a fixed maximum width. One of the many differences from Bootstrap 3 is that Dreamweaver doesn't nest the fluid container inside of Bootstrap 4 navbar. So if you want to limit the width and center a navbar that's fixed to the top or the bottom of the screen you need to select everything inside the nav element and wrap a div around it. So in the DOM panel there is the nav element. I don't want to select that, but it's everything that's inside, so beginning with this link with the class navbar-brand, then holding down the Shift key and clicking this div at the bottom here, select everything inside, right-click, and Wrap Tag. That's wrapped a div around it. Now we need to apply the class, which is simply called container, then press Enter or Return to confirm that. And our navbar has now jumped in slightly and it's a little bit difficult to see because of this background, but just here you've got the edge of the container. So there's a little bit of space on the left hand side and there's exactly the same amount of space on the right hand side. If I hide all the panels by pressing F4 you can see that there is a greater space on this side now and exactly the same space on the other side. We've still got the background stretching right across the viewport, but the content of the navbar itself is now constrained. Now that's not what I want, so I'm going to press F4, bring back the panels, and then inside the DOM panel select that div, which has been wrapped around the nested elements inside the nav, right-click, and select Remove Tag. That removes the div, but leaves the nested elements intact. Now the only time that you do need a container for the navbar is if you want to constrain its width. But everything else in the page does need a container, so make sure that the nav is selected, we need to select that, so we insert the container in the correct place, then go to the Insert menu, make sure that Bootstrap Components is selected in that menu at the top, and we've got both Container, that's the fixed width container, and Container fluid. It's a fluid container that I want, so click that. And the position assist dialog asks where we want it, Before, After, to Wrap around, or Nest inside. We want it to go After, so just click that and that inserts a fluid container immediately after the navbar, ready for us to build the content of the rest of the page.

Contents