Bootstrap navbar won't work

I’ve started the navbar work on my profile page but it’s not working/looking the way I thought it should. I used a tutorial on w3schools for bootstrap navbar. Every tutorial, even the bootstrap site itself, the code looks the same/similar to mine. Should be horizontal, inline with the links to the right at the very least. I’ve added the external link to bootstrap in ‘settings’. I’m so frustrated/confused. Any help?

http://codepen.io/howdythere/pen/jyRdNV

Other than codepen check whether the same code is working when you are running it in your browser.

Hey there,

Did you add the bootstrap javascript?

hi =)
you use 4th version of bootstrap.And this version need other syntax for navbar.
I think you must add to your codepen list of external css a link from maxcdn with 3th version of bootstrap.
Keep it: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

Good luck

2 Likes

I wish there was a more information on this. I used the quick add link in codepen as well and it took me nearly a week to figure out that it was adding the v4 alpha. Remember to use the links from getbootstrap.com and use them for both CSS and JS in your settings.

@MaksimRoganov lists the current CSS here is the link for JS.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

Thank you so much! I had to delete the other version of Bootstrap but it worked. I didn’t even understand this could be an issue.

1 Like

Thanks! I’m begrudgingly glad this happened because I had no idea this could even be a problem. Now I just have to research what the difference is.

What I didn’t realize is that these libraries have to be in both the CSS and JSS settings on codepen. I only had them in CSS (since I don’t have an JS code… I thought what’s the point?).

Bootstrap itself uses both CSS and Javascript. That’s why you need to add both the CSS and the JS libraries. So even though you don’t have any Javascript in your project, when you use an element of Bootstrap, it may call on the Javascript/JQuery associated with Bootstrap.

2 Likes

Thanks for taking the time to explain, @decaren. I’m still fairly new to this arena, so the terminology and puzzle pieces are still finding their resting place in my head. :beginner: :nerd:

Thanks Everyone - This had me stumped for quite a while :slight_smile: