Bootstrap 4 Tutorial 35 - Nav Tab Panes

Bootstrap 4 Tutorial 35 – Nav Tab Panes

Source Code:

Like our content and want to support us more directly? Help Us, Help You!

If you like this stuff, as always, show the love through comments, likes, favorites, subscriptions, etc.

Thousands of free videos at

If you have any questions feel free to post them at

Our Website

Facebook –
Twitter –
Google+ –
Donate –

Our games made using Cocos2d-x

Google Play:

Check out our Cocos2d-x book to learn how to make games

hello in this video we're gonna show you how to create tab pains aka section for each tab so we've got these tabs at the moment we click them they don't do anything at all but what we're gonna do is create a separate section so when we select one the content for that section appears and it doesn't refresh the page or anything to this or hundred voyage JavaScript when I think I'll be coding any JavaScript it's all built in to bootstrap it's just basically classes and elements so we're just gonna do it for the first navigational menu outside of the unordered list we're going to create a div and this is essentially going to be the container for all the different tab sections and you put a class of tab – content inside here we're gonna create more divs and each one of these divs is one section within our navigational menu and for this just pour a roll of tab panel for a class of tab – pane and we're just going to set the first one to active simply because we're gonna make it correspond to the first item so if you want a different want to be active need to do that and we're gonna finally put an ID the ID was gonna call it call it one and they're all get the job done I'm gonna put the number one here and the reason we need the ID is because we need to link each one of these items to one of these sections and we use IDs for that so I'm gonna copy and paste that to save time I'm gonna create free sections you might be thinking well the for item one you don't need a not a section for each item and the other thing is this item is disabled so we shouldn't be able to click it and go to a section hence why we're not going to have a section for it so what we're gonna do now is save it refresh I see Daisy that should not look like that so I'm clearly missing something let's have a look what we got don't go div of class tab – Kanta I'll put them all as active that's worth not missing I've got extra stuff so if i refresh that they go and if I click on these you might be thinking while they're working and like I said we need to link these items to their corresponding pain and to do that it's really simple first of all we need to chain the a href so yes hash then the actual ID mm put one two and three so if we save that refresh the breaks up my thinking why isn't he working anymore or why isn't it working at oh yeah and the reason for that is we still need to tell each individual list item more specifically the a href element what type of data is toggling so for that you put data – toggle equals tab so it's the same when I click this I'm activating a tab copy and paste that it doesn't matter whether it's active or not and obviously we don't need it for the last one so if I go back refresh I click it it's not changing yeah so we need to have a look at why it isn't changing so day 2 – toggle tab you've got the hash one hash two hash free look so good so let's just give a quick refresh okay I have a look so clearly I am missing some piece of code dieter – toggle equals tab I think what I'm missing is a road role equals tab copy and paste this see Daisy rah come facing load the stuff so copy that paste paste save refresh yeah it's really weird why it isn't updating so let's have a look exactly what we've got class tab – pane that looks okay active one should be active obviously div class tab – content tab panel that's the role oh yeah it is looking at okay I don't see why wouldn't be working what I'm actually gonna do is just try changing the ID to something else I'm gonna put profile order about now change the ID in here as well home profile about save that refresh and now it's working so it would appear I didn't know this it would appear that you can't have numbers for the ID and for the a H ref so just bear that in mind it's good that I'll put it there so we've discovered that so if I just go back refresh click about us as you can see I'm switching between the different sections and the content is changing not only that the actual tab is being selected as well I was upon do anything with this finally what we're gonna show you is how to make the tabs fade in/out because at the moment the very static so for you go back click it they automatically appear they don't have any animation you can obviously simulate this with jQuery or you use some built-in classes to do that for the section that is active prop fade and for a class of in but every other section is per fade fade save that refresh and as you can see the content okay the numbers like to just keep your eye on this it's fading in and out so once you've got Putin's headings text images that sort of stuff it looks really really cool fading in and out as an extra task we want you to essentially implement what we've done with this with the other navigational menus if you have any questions feel free to post them on sonar learning coda uk4 slash question PHP that's our free education platform please rate comment and subscribe as you really does help us and as usual thanks for watching and I hope you have a great day

8 thoughts on “Bootstrap 4 Tutorial 35 – Nav Tab Panes

  1. Thank youu very much !! I had the same problem and i didnt get what is it exacly .. i was using numbers in id but after seeing ur tutorial I was able to make it work . Thank you very much !

  2. you should use class active not for a, but for li class nav-item, so that after f5, active tab worked. fix it

  3. It's really great but a little bit problem there. So you make the home tab as active. But by default home content is not showing. When you click others tab and then click home tab then the home content is visible. But I need home content and active tab content will be visible by default. Could you please tell me how can I do that?

Leave a Reply