Hello, in this bootstrap four video, we're going to cover making our navbar responsive. What we mean by that is when we resize in the browser, actually, I'll just show you what happened when I start resizing the browser. So our navbar, right? See it is adjusting. But if we get to a screen size that's really small like this, the content, as you can see, doesn't look very good. And generally, it's, you'll have a hidden with a menu button like that.

But anything by default, so to do that, really simple if you just go to your code, first of all, you want to enclose everything inside your navbar. So all this inside a div, I'm gonna put a div here, the close it off after the form tag, it's indented, so it's easier to see. And the div just needs a couple of classes and the first one is called laps. Next one in nav bar dash toggleable dash x s and the x s part represent the screen size or browser size. It should say though, it's very crucial it should be, I should surely say screen sizes I should say browser size because you could have your website on extra small even though you're on like an extra last screen because your browser has been resized. So when that browser is at the size of extra small only show, I mean only collapse it then and only make it toggleable then otherwise show all of it.

But you can chain this access to the different sizes that you can see right here. So live medium, that sort of stuff. Pretty simple stuff really. Now what we need to do is just add an ID for this ID on collapse. Now boy Callie wifey one. We just need this for when we create button ID I'm pretty sure you seen on websites those three lines which represent a menu, that's what we're going to be adding.

So that just needs something to link to aka something to trigger. So to create that button it's ridiculously simple we just PR a button tag. And inside here is put ampersand ash noise and seven six semicolon Don't worry this one look dodgy or anything like that. This will have the free lines are all this talking about. And this just needs a couple of classes first one is now for dash toggler second one is hidden dash FM dash up. So here's some interesting stuff right here.

We've got hidden dash SM dash up despite FM stands for small so when your bro that is at the small size and up don't show this button because the content is visible, anything below that, which is access more where the content is actually hidden, then show the button. So you can easily mix and match these. And the next thing is going to set the title and a button. Data dash toggle equals collaterals telling you what sort of data it's toggling data, Target, and for this hash and the name of or the ID of our dev. So if we just save that now, go to our web browser, refresh my thinking it doesn't look different. And it doesn't have this browser size, but if I start resizing it, as you can see, now, I'm on a small browser size, the content is now hidden, and I get these free menu button menu lines.

If I click on it, the menu shows and if I click off it, it disappears. If I click on it, and I start resizing again, it automatically adjusts and if I go back, it goes back to the state that he was left in, which is really, really cool. So that's it for a responsive navbar. If you have any questions, feel free to post them on our education platform. So no learning Dakota UK for slash question dot php, there'll be a link in the description. Plus, there'll be another link in the description to source code from this video.

Please rate, comment and subscribe as it really does help us understand whether you liked this video whether you don't like this video. And as usual, thank you for watching, and I hope you have a great day.