First Project Bootstrap CSS

First Project Bootstrap CSS
0.0 0

#1

Hi everyone (first post, loving this learning format in FCC).

I am working through my first project, the tribute page. After getting through the basic setup of the site on codepen, I wanted to run the code on my local Chrome browser to see it there. However the bootstrap features do not show.

What links for bootstrap should I add at the top of my code to remedy, or another solution I may not have thought of?

I figure this is beneficial to know when I eventually want to set my own stuff up outside of the FCC and Codepen code editors.

Thanks :grinning:


#2

Two ways:

  1. Add Bootstrap as remote download while your local page loads
  2. Add Bootstrap as local download, ie it’s already downloaded from http://getbootstrap.com/ and copied in your page’s directory, or better - in a specific location from where you can load it for all your projects

In both cases there are installation steps ‘how-to’, which are very, very, very short and easy


#3

If you want to see what Codepen adds behind-the-scenes, you can simply download the pen. When you are viewing your pen it the Editor View, you will see an Export link in the bottom right-hand corner of the page. Click the Export link and you see Export.zip. Clicking this will download a compressed file which you can then access and uncompress.

image

When you uncompress the downloaded file, you will see an index.html file and a css and js folder (if you used those sections in your pen). You can then open the index.html in a local IDE or text editor to see how Bootstrap and other external files are linked to your project.

image


#4

Thank you Randell and Quantuum. I tried both just to get the experience on options and both work well to get them up on my local Chrome.

Appreciate the quick notes.


#5

Well, I found that in some situations the ‘Export’ button is missing on Chrome, so already reported codepen/support :wink:


#6

Codepen replied that it’s possible some ad-blocking plugins to interfere with the interface. In our case the missing ‘Export’ is caused by using a script blocker (most of the users use them because there are lot of malicious sites, also they lower the cpu load and sites are faster) against google-analytics.com


#7

Understood thank you very much for the update Quantuum!


#8

Well, not a problem for me. Let’s make it clear for everyone on FCC - if you have blocked google-analytics.com, you cannot see the ‘Export’ function in Codepen.io