Bootstrap grid centering not working

Question

I can't center a grid column when the resolution changes with bootstrap. This is the incriminated code:

<div class="container-fluid container-reasons">
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
              <img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
              <h2>Lorem Ipsum 1</h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
              <img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
              <h2>Lorem Ipsum 2</h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                Donec quam felis, ultricies nec.</p>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-4 text-center padding">
              <img src="//####/wp-content/uploads/theme-images/reasonHeart.png" width="50px" height="46px" />
              <h2>Lorem Ipsum 3</h3>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-12 center-block text-center enroll-form-link-homepage">
              <form action="http://###/index.php/inscriete/">
                <input type="submit" id="enroll-button" value="Inregistreaza-te la Oriflame" />
              </form>
            </div>
          </div>
        </div>

The grid works perfectly on large & smartphones, everything is centered, but on tablet resolution when the last column goes under the first two it sticks to left.

I tried with col-*-offset-*, mx-auto offset-*-* but none works. Anyone can give me a hint please?

I'm using bootstrap 3.3.7, my mistake with the tag. Corrected. I tried the code again, but on my site it doesn't work. On the link you sent me apparently it's working. Very strange... — SebaSbs, Apr 12 '18 at 22:54
Read the [Bootstrap 3.3.7 docs](https://getbootstrap.com/docs/3.3/), there is no `mx-auto` etc.. Instead you'd use the offsets as explained in the dup question: 3.x demo: https://www.codeply.com/go/ssJOCvQWrm — Carol Skelly, Apr 12 '18 at 22:56

Cory Kleiser · Accepted Answer · 2018-04-18T18:59:47.380

0

Add col-sm-push-3 to your last div and that will center it for you... The one containing Lorem Ipsum 3. Also add col-md-push-0 so it resets the push for the larger breakpoints.

edited Apr 18 '18 at 18:59

answered Apr 12 '18 at 22:49

Cory Kleiser

1,969
2
13
26

Thank you, that worked. I have also added `col-md-push-0` because on large devices went out of the screen. – SebaSbs Apr 12 '18 at 23:01

Bootstrap grid centering not working

1 Answers1