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: Centered columns

Flex layout: Centered columns - Dreamweaver Tutorial

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

Start my 1-month free trial

Flex layout: Centered columns

“

- [Narrator] Earlier in this chapter, I showed how easy it is to distribute columns equally by applying a flex utility class to a row. Centering content is just as simple, using a different flex utility class. As well as showing you how to do that, I want to discuss what a bootstrap row really is. This highlight section consists of six bootstrap columns in a single row. But if you look at it, well really I've got two rows of three. And if I resize, I've now got three rows of two. And on an extra small device, each column fills the full row, and the columns are all stacked vertically on top of each other. So rather than thinking literally about a row as a single line across the page, it's a container for other elements that you want to treat as a common group, and maybe style as a single entity. I want to create a new feature section below these highlights with all its contents centered at most break points. So I'm going to resize the document window by clicking the visual media…

Contents