Hello in this bootstrap four video, we are going to cover placements for nav bars because at the moment, we've got two nav bars, and they're just placed on top of each other using regular divs, like so and like so. But bootstrap provides you two easy to use classes to position it at the top, and to position it at the bottom and it fixes it there. So when you're scrolling through your website, it's constantly there. So let me give you an example of this. So if we just go to our website so we've got this header here, you should see the slight color difference and when I scroll, the content goes underneath it. That's the same for our sonar learning website.
You can see a little better on here. So when we scroll, this is fixed to top The content scrolls underneath this is very common, especially when you go Burton Zia, when you're logged in is great because you've got like a little notification button, you've got Profile button that sort of stuff and implement it is ridiculously simple. All you have to do to the class I mean to the nav that you want to implement it to do nav, bar dash, fixed. Dash top, save that. Now if we refresh that now fixed to the top, and as you can see, it's adjusted it size and style so it's no longer got the curved corners, and it is wider, aka this padding has gone. And if we want to align it to the bottom, we're going to do to the other one, I think he guessed by now.
Nav bar dash fix dash bottom Save that refresh. Now you can see it's at the bottom. I love now we can actually scroll because you don't really have any content to scroll through songs got pre div here. And inside here, I'm literally just gonna probe and show random text doesn't matter what it is, for the purpose of showing you how it works. Someone's gonna copy and paste it a bunch of times. Copy and paste it again.
Yeah, that's more than enough content so far refreshed, we got content in between the top header and the bottom header. You can think of the bottom header almost like a footer. That's essentially what it pretty much is, but when I scroll, the content goes underneath the top header and comes out from the bottom nav bar. So that is really cool. Okay, to bootstrap. That's it for navbar placement.
If you have any questions, feel free to post them on our education platform sonar learning dot code at UK for slash question dot php to be a link in the description to that clusters, thousands of free videos on there. So check that out as well. There'll be another link in the description to the source code from this video. Please rate, comment, and subscribe. Let us know what you think of this video and our channel. And as usual, thanks for watching and I hope you have an amazing day.