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

Understand the layout grid - Dreamweaver Tutorial

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

Start my 1-month free trial

Understand the layout grid

“

- [Instructor] Before working with Bootstrap, it's important to understand how the layout grid works and what the differences are between Bootstrap 3 and 4. We'll start with features common to both versions. By default, the grid consists of 12 columns but you can change this to any number you like in Dreamweaver. The default gutter, in other words the space between the columns, is 30 pixels. Again, this is customizable. The width of each column expands and contracts depending on the width of the browser or device view port. The grid container can be either fluid or fixed-width. A fluid container fills the available view port whereas a fixed-width container fills the entire width only on extra small devices. Otherwise, it uses the media query breakpoints to determine the page width and centers it. Page content is laid out in rows that align to the columns. Rows are horizontal containers for content that stretch the full width of its parent element. So, if you insert a row directly in the grid container, it occupies the full width of the grid. Incidentally, the rows and columns are invisible. They purely are layout device but Dreamweaver design guides let you visualize them while building a webpage. Grid classes control the width of the elements nested inside a row by specifying the number of columns to span. So, to get two elements of equal width in a 12-column grid, you apply the col six class to both elements. Each row is independent so subsequent rows can have a different number of child elements spanning different columns. You can also nest rows inside a child element. Nested rows span the full width of their parent and generate an independent grid. So, if you're using the default 12-column grid, a row nested inside the six-column element will still have 12 columns independent of the main grid. What makes Bootstrap even more flexible are grid classes based on media query breakpoints. And this is one of the main differences between Bootstrap 3 and 4. Bootstrap 3 has just three breakpoints, the smallest being 768 pixels in the default grid. This was widely viewed as being too big. So, in Bootstrap 4, it's 576 pixels. The other breakpoints remain the same but the grid classes are being reassigned and there's a new set of grid classes call xl who displays greater than or equal to 1,200 pixels. The other major difference is in Bootstrap 4 are that it uses Flexbox rather than floats for laying out the grid. Although the latest versions of all major brands support Flexbox, you can't use Bootstrap 4 if your target audience still uses old browsers. The minimum requirements are Internet Explorer 10, iOS 7, and Android 5. Glyphicons are no longer supported. You need to make your own arrangements for icon fonts if you need them. Most components are being refactored to make their structure simpler, and some components are being renamed. As a result, you can't simply swap out the old Bootstrap style sheet in JavaScript to upgrade from 3 to 4. You need to start again from scratch. In spite of all these changes, the Bootstrap workflow in Dreamweaver is essentially unchanged. Whether you built a Bootstrap site before or not, the rest of this course will guide you through the essential steps.

Contents