jQuery before Bootstrap in Codepen.io

This may cause a lot of frustration and something I had to go through. When adding scripts, if Bootstrap is added before jQuery the app will not render any bootstrap actions requiring jQuery. Small issues like this should not obstruct the learning process. This isn’t even a knowledge issue and more of a codepen.io issue.

I don’t understand why codepen.io doesn’t automatically structure the scripts properly. Bootstrap will never come before jQuery and their developers should know this.

I constantly see new learners that spend days looking for an answer. Aren’t we all striving to learn to build things like codependent.io and wouldn’t we be trying to fix a problem like this? it’s almost setting a bad example for developers on the usability.

So please don’t feel bad if you have ever gotten stuck trying to figure this out and why your Bootstrap won’t doesn’t work properly, it isn’t your fault it’s codepen.io.

Does anyone know if they are addressing this issue or working on a fix?

I agree that a lot of people will have some difficulty with this.

Not really codepen, they just place the script tags in any order you want. If you don’t use codepen you will also have to make sure that you place the script tag with jquery before the bootstrap.js one.

It is not someone’s fault, it is just something you have to know. But it would indeed be better if people are told this, instead of having to spend hours figuring it out.

I think the more general point I’m trying to get across is that Codepen.io has a lot of implicit features. Why not just make the jQuery listing one of them.

Beginners have enough distraction as it is, I would’ve liked to know exactly how something operates before I start messing up my code for no reason. I wouldn’t even call that debugging.

1 Like


This isn’t an issue with codepen.io - it’s a matter of dependencies and script execution order.

Bootstrap has some JavaScript plugins which make use of JQuery. Therefore the JQuery script must be executed first or the portions of Bootstrap that try to use it will fail.

The order has to be JQuery followed by Bootstrap regardless of where you are using them.


I clearly understand why it breaks your code, that’s precisely my point about codepen. Either let users know immidiately or don’t make all the other implications and expect us to understand that the listing of scripts isn’t one of them.
Of course it’s something we all should eventually have to learn but a bigginer will most likely get stuck on this.

Most beginners probably won’t have the browser console open (though they should :slightly_smiling_face: ), but Bootstrap actually gives a nice error message if you forget to add jQuery before Bootstrap:

Uncaught Error: Bootstrap’s JavaScript requires jQuery
at bootstrap.min.js:6

1 Like

You’re right about the console. I guess I’m standing up for the newbies and trying to prevent them from stressing out about nonsense. Coding can get really nerve-racking, minimizing that is probably one of my subconscious goals.