Center img in Bootstrap 4

Question

I tried using mx-auto to center an image inside a Bootstrap 4 card just below the ard-text but the image is left-justified still.

img src="my.svg" class="mx-auto" alt="...">

I tried to put the img inside a div then text-center but did not work.

How do you center it?

John Kreeda · Accepted Answer · 2020-03-30T04:40:43.163

1

Use mx-auto d-block

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

Check this for more

Live example on Codeply

edited Mar 30 '20 at 04:40

answered Mar 30 '20 at 04:33

John Kreeda

104
6

d-block effect on mx-auto is confusing. – Juan Tamad Mar 30 '20 at 04:53
@JuanTamad - What happened? – John Kreeda Mar 30 '20 at 04:56
it worked, just need to understand why adding d-block centered img, thanks. Now I have to figure out how to center the Bootstrap card itself, I can use container class but that would be nested containers. – Juan Tamad Mar 30 '20 at 04:59
@JuanTamad - Read the following article. `d-block` is a display property of bootstrap. https://getbootstrap.com/docs/4.0/utilities/display/ – John Kreeda Mar 30 '20 at 05:01
Visible on all .d-block, I think it's the default. – Juan Tamad Mar 30 '20 at 05:04

Harshith J Poojary · Answer 2 · 2020-03-30T06:00:30.703

0

Just need to add a class .center-block in the img tag, looks like this

<div class="container">
  <div class="row">
    <div class="span4"></div>
    <div class="span4"><img class="center-block" src="picture.png"/></div>
    <div class="span4"></div>
  </div>
</div>

In Bootstrap already has css style call .center-block

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

You can see a sample from here

If it doesn't work then use Use mx-auto d-block

edited Mar 30 '20 at 06:00

answered Mar 30 '20 at 04:44

Harshith J Poojary

316
10
26

center-block doesn't work. – Juan Tamad Mar 30 '20 at 05:02

Center img in Bootstrap 4

2 Answers2