Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Centering an image within a bootstrap card [duplicate]

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 */
}
like image 943
steveWB Avatar asked Aug 30 '18 13:08

steveWB


People also ask

How do I center an image in a Bootstrap card?

For aligning at the center, we need to use . mx-auto and . d-block classes of bootstrap.

How do I center items in Bootstrap card?

In bootstrap 4, to center a card in a grid col, use <div class="col d-flex justify-content-center"><div class="card"></card></div>.

How do I center an image on a card?

To center an image, we have to set the value of margin-left and margin-right to auto and make it a block element by using the display: block; property. If the image is in the div element, then we can use the text-align: center; property for aligning the image to center in the div.


1 Answers

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.

like image 186
JoelDoryoku Avatar answered Sep 25 '22 01:09

JoelDoryoku