Centering a single column using bootstrap 4 grid system

user_5678853 0
Viewed 17278

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>
bootstrap-4 css
2 Answers

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>
user_47331610

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/

user_76750580
Related