How to center the image in bootstrap 4? [duplicate

Question

This question already has an answer here:

• Bootstrap 4 center-block unable to center 3 answers
• How do I center an image in Bootstrap? 2 answers

I am new to Bootstrap 4, earlier in Bootstrap 3 we use class "center-block", now I am not able to find this in new version.

Answer 1

Center an inline element has nothing to do with Bootstrap actually.

Center the image using text-align

An image is a inline element and can be aligned using text-align.

Text will flow around the image, since it is an inline element.

Normally:

<div style="text-align: center;">
    <img src="http://placehold.it/200x200" />
</div>

The Bootstrap way:

<div class="text-center">
    <img src="http://placehold.it/200x200" />
</div>

Center the image using margin

You can change the display of the image to a block element and use margin to center the block.

Text will be pushed above and under the image since we change the display to block.

<div>
    <img src="http://placehold.it/200x200" style="display: block;margin: auto;" />
</div>

The Bootstrap way:

<div>
    <img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>

Full example

.my-text-center {
  text-align: center;
}

.my-block-center {
  display: block;
  margin: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="my-text-center">
  <img src="http://placehold.it/200x200" />
</div>

<div class="text-center">
  <img src="http://placehold.it/200x200" />
</div>

<div>
  <img src="http://placehold.it/200x200" class="my-block-center" />
</div>

<div>
  <img src="http://placehold.it/200x200" class="mx-auto d-block" />
</div>

Answer 2

This can be done with built-in .d-block:

<div class="container">
    <div class="row">
        <div class="col-4">
            <img class="mx-auto d-block" src="...">  
        </div>
    </div>
</div>

More info in this link

Answer 3

Try using this code.

html:

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12 centered">
                        <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" />
                    </div>
                </div>
            </div>
        </div>
    </div>

css:

centerd{

        text-align: center;

    }