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
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.
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!