Why does CodePen hate Bootstrap?

I’ve spent the last 3 days trying to get Bootstrap to display correctly in CodePen, but fail every time.

Pull the code out and run it through Sublime or Atom in the same browser and it works perfectly.


1 Like

I think you r right I also have the same problem … so I begin to use Brackets code editor and it worked correctly … so I suggest u to use any another code editor and just copy and past your code after you finish on CodePen to finish challenge .

Hard to tell without a link to the pen, but did you tell Codepen to include Bootstrap? Click on Settings, then go to the CSS tab, click quick-add, select Bootstrap. Same on JavaScript tab if you need Bootstrap’s JavaScript.

I have done this but nothing working correct :confused:

You need to use bootstrap 3 instead of 4. Use this cdn and paste it into the quick-add:



Maybe it is the Bootstrap version?


Using the v4 is interesting that the changes in Bootstrap do not affect copypasta into my editor, but only in CodePen.

Well great, I really wish this had been made clear in the project directions at the beginning, probably would have saved literally 10-15 hours. Thanks for the help though! it worked! FINALLY!!

FCC is fully volunteer and relies on users to submit issues and pull requests. This is a perfect example. This forum is not an issue tracker. It helped you find a fix to your issues but if you were to go the challege and submit an issue about the breaking changes and how to fix it, it would help the NEXT few thousand campers save 10-15 hours each. You’d be a hero.


Hi Ginoskotheon,

thanks for that tip, that did fix some of the issues I was having as well. still there seems to be stuff that is not working.
I created a div and tried to use the bg-success class but my background color was not set. also stuff like navbar did not seem to work as expected.
any advice.

You should learn to code in your own machine. Way more control over anything + learning how to use the terminal is a must.