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

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Flex layout: Equally distributed columns

Flex layout: Equally distributed columns - Dreamweaver Tutorial

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

Start my 1-month free trial

Flex layout: Equally distributed columns

“

- [Instructor] Use of the CSS flexbox module is one of the most important changes in Bootstrap 4. It not only avoids the need to clear floats, it also offers other possibilities such as equally distributed columns. I've added some dummy text to each of the six columns in the row that we created in the previous video. On an extra small device, the columns stretch the full width of the row and they're stacked vertically. The great advantage of Bootstrap using flexbox becomes apparent when I click the visual media queries bar to resize the document window for the breakpoint for small devices. Even though the text is of varying lengths, the columns are laid out two abreast. In Bootstrap 3 which uses floats for layout, this third column would be stuck below the second one because it would float up into this empty space, and the length of the first column would prevent it from moving all the way across to the left. In Bootstrap 3, you would need to insert an extra div to clear the float…

Contents