From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Unlock the full course today

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

Nesting a layout

Nesting a layout - Bootstrap Tutorial

From the course: Bootstrap 4 Layouts: Responsive Single-Page Design

Start my 1-month free trial

Nesting a layout

“

- [Instructor] Let's take a look at what it takes to create a layout that changes depending on the width of the screen. And I don't mean changes in terms of columns, but that is a completely different layout at some breakpoints. This is called a nested layout and you can see that my art department made these really cute nested graphics here. And I've got two of them. And it all goes in this article right here, which has an ID of page-nested and a class of page-section, just like anything else. So, let's go ahead and start by adding the typical classes. So I'm gonna put in a class here of layout-image, and the headlines are going to have class of layout-title. And these paragraphs will have a class of layout-text. So, that's gonna look just a little bit different. Perhaps we won't even be able to tell quite yet what's going on here. But, now we can create a section for our layout. So, we've got two pieces right here that are already in sections. And so what I'm gonna do is create…

Contents