Code Pen Bootstrap

Did something change with Bootstrap?

I started a new pen and I couldn’t get my bootstrap working. I went to the settings and added bootstrap as an external CSS like usual, and it didn’t work.

I checked one of my older pens to see if I could find the difference, and I noticed that the version of Bootstrap was different. On my old pen (which is only a few weeks old), when I added bootstrap as an external CSS in the preferences, it added this:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

but now, it adds this:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

When I copied and pasted the older bootstrap link to my new pen, everything worked the way I’m used to.

Has there been a major change in Bootstrap, and now I have to relearn it?

I hope my explanation makes sense.

what you have experienced is called “maintenance”.
They update stuff, it breaks stuff, we fix stuff.
Lather, rinse, repeat.

consider it job security

:wink:

So the way they taught Bootstrap here at freecodecamp will no longer work with the new version?

Yup! Notice the numbers in those links. The first one is 3.3.7. The second is 4.0.0-alpha. This versioning is a standard that you’ll see over and over again. The left-most number is the “major version”. When this changes ( 3 -> 4 ), it means there will be breaking changes. That means, yes, you’ll have to relearn some stuff.

New documentation.

1 Like

The same thing happened to me yesterday as I was trying to code on codepen for the Portfolio challenge and creating a navbar.

After an hour of debugging I saw the same thing you did. While the current version is still 3.3.7, it looks like codepen has gone and updated to 4.0.0-alpha.

The nice thing is, if you would like, codepen gives you the option to link an external CSS/JS so you can just re-link version 3.3.7 and you should be good to go!

1 Like