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.

Creating a header layout

Creating a header layout - Bootstrap Tutorial

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

Start my 1-month free trial

Creating a header layout

“

- [Instructor] Alright, so it's time to keep on working on this header. I've added a little bit of text right here, and it's this new section that is going to contain some sort of sample text. So if we take a look at what we've get so far, we have the nav section here. And then we have this other piece that's gonna be our new section. There is something else that I do wanna fix here, and that is the fact that now when I expand this layout, this navigation is still to the left of the layout. I wanna put that to the right. So to do that before I collapse that, I'm going to add to the nav bar nav a class of ml-auto. So this is a bootstrap class. This means margin left. And set that to auto. And when I do that you can see that the navigation, the links kind of go to the right-hand side. And so, remember these are the spacing classes. So you can do m or p. P for padding, m for margin. And then, one of the css sides. So, top right, bottom left. Also x and y for top and bottom and at…

Contents