Both versions of Bootstrap use a layout grid based on invisible rows and columns. Although the basic principles of the layout grid remain the same, there are important differences that make Bootstrap 3 and 4 mutually incompatible. In this video, learn how the layout grid works and explore the important changes in Bootstrap 4.
- [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.
- Defining a layout grid
- Inserting and modifying a navigation bar
- Adding a container for the page content
- Inserting a responsive image
- Resizing and duplicating columns
- Inserting fixed-size images
- Inserting cards
- Editing a carousel