Nav Tab & Pills

3 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €130.92
You save:  €37.40
List Price:  £110.63
You save:  £31.61
List Price:  CA$191.76
You save:  CA$54.79
List Price:  A$209.79
You save:  A$59.94
List Price:  S$189.71
You save:  S$54.20
List Price:  HK$1,092.64
You save:  HK$312.20
CHF 89.34
List Price:  CHF 125.08
You save:  CHF 35.74
NOK kr1,055.54
List Price:  NOK kr1,477.80
You save:  NOK kr422.26
DKK kr697.37
List Price:  DKK kr976.34
You save:  DKK kr278.97
List Price:  NZ$228.72
You save:  NZ$65.35
List Price:  د.إ514.18
You save:  د.إ146.92
List Price:  ৳16,414.01
You save:  ৳4,690.05
List Price:  ₹11,698.32
You save:  ₹3,342.61
List Price:  RM659.77
You save:  RM188.52
List Price:  ₦208,305.12
You save:  ₦59,520
List Price:  ₨38,904.80
You save:  ₨11,116.45
List Price:  ฿5,118.69
You save:  ฿1,462.58
List Price:  ₺4,595.87
You save:  ₺1,313.20
List Price:  B$760.43
You save:  B$217.28
List Price:  R2,514.77
You save:  R718.55
List Price:  Лв256.10
You save:  Лв73.17
List Price:  ₩194,500.70
You save:  ₩55,575.60
List Price:  ₪523.44
You save:  ₪149.56
List Price:  ₱8,241.21
You save:  ₱2,354.79
List Price:  ¥22,366.90
You save:  ¥6,391
List Price:  MX$2,535.33
You save:  MX$724.43
List Price:  QR509.50
You save:  QR145.58
List Price:  P1,882.70
You save:  P537.95
List Price:  KSh18,090.73
You save:  KSh5,169.15
List Price:  E£6,671.93
You save:  E£1,906.40
List Price:  ብር8,060.48
You save:  ብር2,303.16
List Price:  Kz119,621.45
You save:  Kz34,180
List Price:  CLP$130,191.68
You save:  CLP$37,200.28
List Price:  CN¥1,016.50
You save:  CN¥290.45
List Price:  RD$8,244.93
You save:  RD$2,355.86
List Price:  DA18,810.99
You save:  DA5,374.95
List Price:  FJ$313.96
You save:  FJ$89.71
List Price:  Q1,083.97
You save:  Q309.73
List Price:  GY$29,209.11
You save:  GY$8,346.05
ISK kr13,928.63
List Price:  ISK kr19,500.64
You save:  ISK kr5,572
List Price:  DH1,391.24
You save:  DH397.52
List Price:  L2,491.82
You save:  L712
List Price:  ден8,048.10
You save:  ден2,299.62
List Price:  MOP$1,122.77
You save:  MOP$320.81
List Price:  N$2,500.60
You save:  N$714.51
List Price:  C$5,142.62
You save:  C$1,469.42
List Price:  रु18,664.37
You save:  रु5,333.05
List Price:  S/531.61
You save:  S/151.90
List Price:  K544.86
You save:  K155.68
List Price:  SAR525.42
You save:  SAR150.13
List Price:  ZK3,558.76
You save:  ZK1,016.86
List Price:  L651.30
You save:  L186.10
List Price:  Kč3,263.89
You save:  Kč932.60
List Price:  Ft51,738.82
You save:  Ft14,783.57
SEK kr1,050.64
List Price:  SEK kr1,470.94
You save:  SEK kr420.30
List Price:  ARS$126,527.98
You save:  ARS$36,153.43
List Price:  Bs965.22
You save:  Bs275.79
List Price:  COP$582,821.92
You save:  COP$166,532.44
List Price:  ₡73,019.50
You save:  ₡20,864.20
List Price:  L3,455.44
You save:  L987.34
List Price:  ₲1,051,535.54
You save:  ₲300,460.18
List Price:  $U5,527.53
You save:  $U1,579.40
List Price:  zł566.13
You save:  zł161.76
Already have an account? Log In


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.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.