Hello, in this bootstrap four video, we're gonna cover tabs and pills for your nav. So we've got a nice, basic nav right here, I'm going to turn this into a tab system. So Daisy, instead of having a on top of each other, that is going to be next to each other, I can have a bit of styling to make it look a little better. So to do that, first of all, we're going to remove the URL, because if you've got tabs stem, you generally don't want a URL. So I'm gonna put a hash everywhere. For any chain, this one hash and to make this into a tab system for an extra class to the unordered list of NAB dashed hats.

Now if we save refresh, there we go. We have our new nav system as Alex's car a bit of hava styling obviously can't do That one because that's disabled, it's got a line underneath it, which goes all the way across, it's responsive. But by default, you'll probably be already on a particular tab. And to simulate that, you just add a class of active to one of your h ref. So I'm going to prefer the first one. And I said this to active.

Refresh, and there you go. It's simulating active. If I click the others, you might be thinking, why aren't they essentially being selected? The reason for that is you need JavaScript for that, plus, you also need some bodies for each of the tabs. And we'll be covering that in a separate video because there's a bit more information for that, and we'll need a separate video. So the next thing I'm going to show you is pills.

So to do pills, we're actually going to copy and paste This so you can see the different ones. I'm going to set this to pills. That's literally all you have to do, everything else remains the same. So if we refresh we have a pill based system. So this is the selected, these are hava disabled. And again, obviously, we can't select different ones simply because we don't have the body and the JavaScript implemented.

Final one we're going to show you is stacked pills. To do that. Again, we are going to copy and paste it. Obviously, we just need to change this to pills. But we also need nap dash stacked. So if we refresh the web browser now, the actual nap is now on top of each other.

And as you can see the button inside or the link inside the nav has taken off the width of its parent container. So let's take that into account when you're using columns. So that's it for now. In terms of tabs and pills, we will have a separate video covering like JavaScript side, like I said, plus a few more features. If you have any questions, feel free to post them on sonar 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, and source code from every other video in this series.

Please rate, comment and subscribe as it really does help us provide more content to you on a regular basis and for free. And as usual, thanks for watching and hope you have a great day.