Centering content issue

Tell us what’s happening:
I can’t center any of these elements with bootsrap, css flex, block or margins auto auto. I’ve been playing around with various ways but nothing seems to work so I think there might be something wrong with the code. Could someone please take a look, it’s extremely frustrating as you are all probably aware

ball rolling (codepen.io)

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Safari/537.36 Edg/103.0.1264.37

Challenge: Center Text with Bootstrap

Link to the challenge:

For the codepen to work with the bootstrap styling, you need to add it to the <head> of your pen in the settings, since In CodePen , whatever you write in the HTML editor is what goes only within the <body>

Thank you but that still didn’t work.
I added this to the head

<link href="https://cdn.skypack.dev/bootstrap@5.1.3"/>

and this to the html

<body id="body" class="d-flex align-items-center">

I think this class shouldn’t be set to <body>

I forked your codepen to see what was going on and I applied the classes d-flex align-items-center to the #main-container instead and it is working. Looks like a mess as of now, but at least it shows bootstrap is indeed working on your pen.

thanks, i’ve taken that off but nice to know it does work. I havn’t used bootstrap too much so far. thats also what happened when i initially applied {display: flex} to the main-container. but after adding {flex-direction: column} the page aligned itself vertically, back to the original structure i created it in. it’s all refusing to budge to the center though but i’m thinking it might be the css animations i’ve added to the page load. I’ll have to mess around with it a bit more or maybe take the {translateX:50px} off as it might be instructing the elements to be positioned where they are

sorted it with a simple fix luckily… I was missing some {margin: auto auto}

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.