title: Centering an image within a bootstrap card
body: <p>I'm having problems centering an image within a bootstrap card. </p>
  
  <p>A similar question has been asked before (<a href="https://stackoverflow.com/questions/44914373/how-do-i-center-a-bootstrap-card-image">How do I center a Bootstrap Card Image</a>)
  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.</p>
  
  <p>My code: 
  HTML:</p>
  
  <pre><code>    &lt;div class="card text-center h-100"&gt;
      &lt;img class="card-img-top smallimg" src="IMG/magnifyingGlass.png" alt="Card image cap"&gt;
      &lt;div class="card-block catCard"&gt;
        &lt;h4 class="card-title"&gt;Some text&lt;/h4&gt;
        &lt;p class="card-text"&gt;Some Text&lt;/p&gt;
      &lt;/div&gt;
                  &lt;div class="card-footer"&gt;
          &lt;small class="text-muted"&gt;Some Text&lt;/small&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.card-footer{
  position:absolute;
    bottom:0;
    width:100%;
  }
  
  .smallimg {
      width: 150px; 
      height: 150px;
  }
  
  .catCard{
      margin-bottom: 50px; /* height of the footer or more */
  }
  </code></pre>