Bootstrap not working with codepen?

I was working on the portfolio project and I just couldn’t get the navbar to display properly using bootstrap. After a couple hours of trial and error I finally figured out codepen was loading version 4 of bootstrap and the navbar function apparently relies on version 3. If you’re having the same issue try following the instructions in this video: https://youtu.be/fHKuCzYFTPY

5 Likes

Yes @travis i had similar issue using bootstrap class=“text-center” inside a Div of class=“row” it wasn’t centralizing my text due to bootstrap 4 so i used bootstrap 3.3.5 instead.

I was not having these issues; however it seems that codepen is currently down or overloaded. I was trying to finish up the tribute page and it crashed.

Yeah haha… Codepen making Quick Add add Bootstrap 4 really confused and messed people up, however, a lot of people managed to fix it after coming to FCC chat rooms and getting help, kind of annoying to have codepen add 4 instead of 3.

Wow! What a huge help. I did this for the current local weather and completely forgot for random wiki search. Seems like there might be a better way to handle this on FreeCodeCamp’s end. Then again, they’re reinforcing read-search-ask I guess. :wink:

Bootstrap 3 worked in codePen for me only when I copied entire header from my local html file into Codepen html setings => Stuff for <head>. Default css external links it did not work for unknown reasons.

Why is Codepen using bootstrap 4 when 3 is used more?

Well, I think Codepen is using Bootstrap v4 because that’s where the world is going to.

If you want to load Bootstrap 3 in Codepen it’s easy to do. Just go to Pen settings / CSS and Add External CSS
add the following codes in this order:
first field: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
second field: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css

And because Bootstrap relies on jQuery you need to load it too. Go to Pen Settings / JavaScript and Add External JavaScript
add the following link to the field:
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js

This should do the trick. At least it did for me :slight_smile:

3 Likes

Saved me! Thank you!

2 hours of frustration with my column sizes not working
"I know im doing this right WTF?!?!??!?!"
and then a google led me here…
Thanks guys “read-SEARCH-ask” hahaha

Awesome. Helped a lot

Holy crap! I knew i was doing something wrong. Thanks a lot buddy!!!:grinning: