Bootstrap Offset Not Working as Intended

1

Hello all,

I’m having a issue centering a Form + Button I have nested inside a Bootstrap Col.
Currently, I have the column size as sm-8 with an offset of sm-2 on each side (summing to 12 on the grid).
I thought this would let me center the column on the page.
Maybe the display: inline-block if affecting the positioning behavior?
I’ve hacked at for a while to no avail:

https://codepen.io/drustin/pen/vJvLJR?editors=1100

Thanks in advance for the help, I’m sure it’s a concept I’m not understanding yet that I need to learn.

2

Hey. If you just need to center them both, you don’t need the offset. Just give your column full width (col-12) and add a text-center class. That should be enough!

3

Thanks @noyb . Is using offsets something I should avoid? Or is this a much simpler solution to this scenario?

4

There’s nothing wrong about using them but if you want to center stuff they won’t help that much and, yes, “text-center” is a much simpler solution indeed!

1 Like