How To Add Bootstrap To Codepen

I know a lot of people are building their tribute page but are not using bootstrap. I made this video showing you how to add bootstrap to codepen. I know this is easy but for a beginner it may not be. Happy coding :slight_smile:

How To Add Bootstrap To Codepen (In 20 Seconds)

15 Likes

Very nice! Thank you :+1:It can be easy to miss unless one is paying close attention to the settings menu. They also have Foundation if anyone is interested.

1 Like

Good idea, some beginners don’t know the css settings area… :slight_smile:

1 Like

you are welcome @chadwyck242 ! happy coding my friend and glad you liked the video (:slight_smile:

Hi michael,
I have done as u mentioned here. I am trying to use the bootstrap grid but its not working. Do I need to add or change anything in the html settings?

thank youuu :slight_smile:

1 Like

I’ve looked at a couple videos and this forum and I still can´t do it. The only things that appear for me are bootstrap 3 and 4, no regular bootstrap. Is that the same or do I need to change something?

What do you mean by “regular bootstrap”? Bootstrap 3 is probably what you are thinking. Bootstrap 4 is the newest version, and Bootstrap 3 is the older one that is used in many tutorials on the web and freeCodeCamp. When the video above was made, Bootstrap 4 wasn’t out yet, and they used version 3. Now that version four is out, they have to distinguish the older version as some still want to use it. So if you want the version used in the video, use Bootstrap 3.

I would suggest you use Bootstrap 4 though. It uses flexbox and has other really nice improvments over the older version.

1 Like

Oooh got it. Thanks a lot!

1 Like

:raised_hands: :trophy:

It took a little hunting for me to figure this out back when I first started with fCC

2 posts were split to a new topic: My tribute to Obama

Hi Michael,

I chose Bootstrap 4 in the Settings on Codepen but page is still not responsive. What do you think is the issue?

Thank you.

mebbe add this in the html area?..

<link rel="stylesheet"
       href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> 
1 Like

Hi Xiija,

I’m doing that already while I figure out what’s wrong with Codepen but it’s creating problems on my code.

Thank you.