20

I am trying to use the bootstrap 4 grid system to center a single column. In bootstrap 3 I was able to do:

<div class="col-md-10 col-md-offset-2">
</div>

In bootstrap 4 the same does not work even when using the new offset class: offset-md-2.

The following works, but something feels wrong about having empty columns on the page, just to center a col-md-5.

<div class="row">
    <div class="col"></div>
    <div class="col-md-5 align-self-center">
        <img src="img/myimage.gif" style="width: 100%;">
    </div>
    <div class="col"></div>
</div>
Blake Rivell
  • 13,105
  • 31
  • 115
  • 231

2 Answers2

28

As per the documentation you can use justify-content-center on the row to center any number of columns in a row. 

<div class="row justify-content-center">
  <div class="col-4">
    One centered column
  </div>
</div>
cloned
  • 6,346
  • 4
  • 26
  • 38
  • 10
    What am I supposed to say to this comment? Other than "Of course it works." If it doesn't work for you then you have additional CSS or applied the wrong class or something else. You can try opening your own question if you need further help. – cloned May 12 '20 at 06:48
3

You can add

justify-content-center

on "row" div.

so it would be something like this:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-2">
      //content ...
    </div>
  </div>
</div>

This is an example from the official bootstrap documentation https://getbootstrap.com/docs/4.0/layout/grid/

S.Damian
  • 136
  • 6
  • Thank you for specifying it's on the "row" div, that was the key for me in voting your answer up. – GTS Joe Nov 11 '20 at 17:19