17

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
  • 12,005
  • 28
  • 104
  • 208
  • There are 12 columns, so offsetting 2 units will push 10 units all the way to the right. – Zim Jan 03 '19 at 15:11

2 Answers2

25

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
  • 5,552
  • 4
  • 25
  • 37
  • 1
    doesn't work at all – Aaronium112 May 11 '20 at 20:10
  • 9
    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
2

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
  • 126
  • 5