Centering an image within a bootstrap card

Question

I'm having problems centering an image within a bootstrap card.

A similar question has been asked before (How do I center a Bootstrap Card Image) but was removed as a mod deemed it to be a duplicate. However, the answers that have been provided to similar questions do not work for bootstrap cards. Trying various center classes within the img tag didn't seem to work.

My code: HTML:

    <div class="card text-center h-100">
    <img class="card-img-top smallimg" src="IMG/magnifyingGlass.png" alt="Card image cap">
    <div class="card-block catCard">
      <h4 class="card-title">Some text</h4>
      <p class="card-text">Some Text</p>
    </div>
                <div class="card-footer">
        <small class="text-muted">Some Text</small>
    </div>
  </div>

CSS code:

.card-footer{
position:absolute;
  bottom:0;
  width:100%;
}

.smallimg {
    width: 150px; 
    height: 150px;
}

.catCard{
    margin-bottom: 50px; /* height of the footer or more */
}

The first answer I tried worked: https://www.codeply.com/go/Fb0Zh3A1E9 (`mx-auto` on the image) — Carol Skelly, Aug 30 '18 at 13:25

score 22 · Accepted Answer · edited Jun 20 '21 at 12:42

22

In Bootstrap 4, the mx-auto class (auto x-axis margins) can be used to center images that are display:block. However, img is display:inline by default so text-center can be used on the parent.

edited Jun 20 '21 at 12:42

user5305519

3,008
4
26
44

answered Aug 30 '18 at 13:25

JoelDoryoku

364
3
11

mx-auto worked fine for me (bootstrap 5) – Dhouibi iheb Jan 19 '22 at 16:45
where did you put mx-auto? – niico May 03 '23 at 23:36

Centering an image within a bootstrap card

1 Answers1