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