Code Pen Bootstrap

1

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.

2

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

consider it job security

:wink:

3

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

4

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
5

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