Having trouble with centering Bootstrap div in CodePen env

Having trouble with centering Bootstrap div in CodePen env
0

#1

CodePen Link: https://codepen.io/nbonne/pen/OmxMop

I wrote this in Sublime and transferred to CodePen. In Chrome, content is centered in main and stays there.

The content div seems to lie on top of 2 column spaces. I notice that I get stuck a lot with the way things change when transferred from Sublime Text to CodePen. Is there something I am missing, some little trick that simplifies the transition?


#2

You need to add Bootstrap as an external resource in CodePen:

The gif shows how to add a JS library, but obviously you’ll want the CSS tab. It’s the same process.


#3

Unless adding it twice makes a difference, I think that’s already covered.


#4

Bootstrap has not been added to that project.


#5

So then what’s the point of adding it under the Javascript tab? Same exact URL.


#6

I had a bit of text there in between the gif and the link. Easy to miss, but you need to add the Bootstrap CSS file under the CSS tab. The link describes the process clearly.

Bootstrap has both a JavaScript component, which you correctly added, but it also has a CSS component which has not yet been added, at least not correctly. I see you tried adding a <link> tag in the the header section under the HTML tag. Codepen ignores these.


#7

Ah cool, didn’t realize Bootstrap needed to be added to the CSS and Javascript. I feel like I should have read that somewhere before but I can’t recall. Thank you.