Bootstrap navbars won't load in Code Pen

Bootstrap navbars won't load in Code Pen
0

#1

I’ve got a problem when I cut and paste code bootstrap code from almost every source- it’s not coming up formatted correctly in Code Pen. I’m making sure Bootstrap 3 and 4 are selected. Here’s an example- it’s coming up with a vertical list. What am I doing wrong!?

This is the original page: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar&stacked=h

Bootstrap Example
WebSiteName

Basic Navbar Example

A navigation bar is a navigation header that is placed at the top of the page.


#2

Don’t select Bootstrap 3 and 4 - select one or the other. And have you selected jQuery in the JS section?


#3

I hadn’t selected jQuery, but when I just did, it hasn’t made any difference. I’ve also tried it with both versions of Bootstrap separately :frowning:


#4

If it’s any help, my code pen is here https://codepen.io/JammyPiece/pen/VWxPyr


#5

You have Bootstrap 4 added in the settings but then Bootstrap 3 being added using a link tag in your code. I’d recommend removing all of the link tags and only added Bootstrap 3, BS3JS and Jquery from the codepen settings.

The example code you’ve got from W3 schools uses Bootstrap 3, so using Bootstrap 4 is probably causing the rendering issues.

Hope that helps


#6

Thanks for the help but it still isn’t working. Just keeps looking the same.


#7

Give us your codepen link.


#8

You didn’t copy the correct code from w3schools. You need to scroll down to the bottom of the page before the Exercises to the section entitiled “Collapsing The Navigation Bar”.


#9

That section doesn’t work either. I was just trying to get the basic bar at the top of the page. But none of them come up correctly.


#10

It works fine for me. I pasted in the code from w3schools, selected Bootstrap 3 in CSS, and selected jQuery first and then Bootstrap 3 in JS. Here it is: https://codepen.io/shreecheryl/pen/BZxdag


#11

@shreecheryl 's answer works @JammyPiece you should fork and use this, Instead of Going nuts. :slight_smile:


#12

I just checked your Pen. In JS, you have Bootstrap 3 selected first and jQuery selected second. Try switching them.


#13

Ah ha!!! It works now! Thank you so much! Why doe the order matter?


#14

Just add Bootstrap 3 in the CSS section with Quick-add. In the JavaScript section, quick-add jQuery.


#15

The order matters because the Bootstrap 3 Javascript file is using jQuery so the browser needs to read the jQuery file first so the Bootstrap file makes senses to it.


#16

Because bootstrap.min.js is built on top of jQuery.

So unless you give it jQuery it will scream Bootstrap's JavaScript requires jQuery in the console.


#17

I see, thanks very much :slight_smile:


#18

Didn’t know it even did that. Thanks, I’ll keep it open in future.


#19

It’s doing it again. This time I’ve made sure to list jQuery above bootstrap 3. But I’m still getting a degraded menu…

code pen- https://codepen.io/JammyPiece/pen/NgMvjG

Navbar w/ text
Navbar text with an inline element

#21

Ok, I got it. The code you are using is from Bootstrap 4 Alpha, but you are loading Bootstrap 3 on Codepen. I suggest you use only Bootstrap 3 for now. You can move to the new version in the future, but there’s no reason to rush.

Try the components from this page instead: http://getbootstrap.com/components/#navbar