Align content to center on small device, Bootstrap 4

Use these classes for the column.

  1. d-flex to make its display flex
  2. justify-content-center to align its content in its center on small screen.
  3. justify-content-md-start to align its content on the left side. Basically it resets the alignment of the element's content from center to left. 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col col-md-12 d-flex justify-content-center justify-content-md-start">
      <img  src="//placehold.it/250" alt="">
    </div>
  </div>
</div>

Use responsive margins on the image..

<div class="container">
    <div class="row">
        <div class="col-md-12 p-2">
            <img class="d-block mx-auto mx-md-0" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

https://www.codeply.com/go/U63JXeFRrE

Or, responsive text align on the col...

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center text-md-left p-2">
            <img class="" src="//placehold.it/200" alt="">
        </div>
    </div>
</div>

https://www.codeply.com/go/U63JXeFRrE

Read about the Bootstrap util classes: http://getbootstrap.com/docs/4.1/utilities

Tags:

Bootstrap 4

Recent Posts