How to use Bootstrap with CodePen

Recently CodePen defaulted to Bootstrap 4 when you choose it in the CSS settings page.

fCC trains you on the 3.3.5 version that was previously defaulted in CodePen.

There are definitely some changes to the class names and usage.

CobePen default now:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

Switching to on older Bootstrap will fix some of the issues you may be seeing.

Got to Settings, then to CSS, then Add External CSS and over the existing Bootstrap entry, paste this:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

When you’re done, you should have only one Bootstrap, the rev 3.3.5.

The other option would be to keep using the most recent Bootstrap and use CSS to make the adjustments you want.

You can check the differences between version 3 and 4 in this article from Bootstrap:
https://v4-alpha.getbootstrap.com/migration/

7 Likes