Bootstrap4 nav bar not rendering in CodePen free accnt

I am just starting my 2nd project and can’t get past the first line. I am using standard BS-4 collapsible nabar which views well in other web pages I have designed previously. On these pages I used code copied almost directly from the Bootstrap site, with Bootstrap CDN copied from their page https://v4-alpha.getbootstrap.com/ .

However in Code pen, with BS-4 Css and Bootstrap-Js loaded in the “Pens” view the navbar appears only as the collapsed button (regardless of screen width) and the button just flickers when clicked. If I remove the collapsible button, the list items just stack down the page.

I have tried adding the Bootstrap CDN copied from their page at the bottom of the HTML section of the “Pen”; but this failed to solve the problem.

Do you think the JS I loaded in the (free account) code pen is the problem? How should I load the JS into Code Pen (Pens view)? Or should I just go back to BS3 version? Or any other suggestions.

Link to your codepen, it’ll be easier to diagnose seeing it all for ourselves.

I got BS4 working on the free account on codepen with no problems, if I recall correctly, so it won’t be the free status that is the issue.

Did you Quick-add BS-4? Because it uses BS-4 beta, not alpha, and the code that you copied from the (alpha) docs might no longer apply. Also make sure that you also included jQuery as a dependency (before bootstrap.js).

And a link to codepen is helpful to helpers :wink:

Thank you for your help…yes, it was just an alpha-beta thing…Oops! Here’s my project page: https://codepen.io/CKBooth/full/VMEjyg/

Thank you for your prompt reply. It’s terrific to know there’s help out there… and yes, I made an alpha/beta BS mix-up. There are changes to the CSS classes in the beta version of BS. Here’s my link https://codepen.io/CKBooth/full/VMEjyg/

I’m having a very similar problem. Not too sure if I should start a new thread or just post here.

My codepen is here: https://codepen.io/100percentNick/pen/NXOWKE/

On reading this thread I’ve quick added Bootstrap 4 and jQuery under the ‘javascript’ setting for my CodePen. I still can’t get the navbar to work when the screen width is very small and the navbar should be collapsed.

Not too sure what to do next… may need to just start over and try again from scratch.

The jQuery library must be imported before Bootstrap’s JS file. Just swap their order in the JS settings.

1 Like

Thanks so much for your help! I read above that there was a dependency, but I’m so new to CodePen that I didn’t realise the order was crucial.

and probably you should add popper.js - check your console :slight_smile:

1 Like