Bootstrap 4 image center

HTML-CSS
#1

Why does this code not work please:-

<div class="card">
         <img class="card-img-top mx-auto d-block" src="images/myimg.pg" alt="an image">
          <div class="card-block">
                  <h4 class="card-title">Title Text</h4>
                  <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
           </div>
</div>
#2

.pg image extension?

#3

.pg doesn’t seem to exist in Bootstrap 4

#4

That’s what I meant. .pg is not an image file type, it should be .png

Check your <img> tag to see that you are pointing to an image file with a .pg extension.

Also check that the corresponding image is named with the correct .png extension.

#5

Hi! So it seems to be you are not pointing to the correct file. If this is on codepen.io you
need to use a web address like this
https://s3-us-west-2.amazonaws.com/s.cdpn.io/1845118/stock-photo-coding.jpg
not a file path. If this is locally on your machine then i’m pretty sure .pg is not
a correct file type. Maybe try .png or .jpeg . Right clicking on a file and saying properties
will show you what kind of file the photo you need is. I want to say bootstrap 4 also centers
imgs differently now but I can’t confirm that is true.

#6

Oops! :hot_face:
I accidentally deleted the ‘j’ - it’s a .jpg file.
My apologies to all.

The problem is still the same because the actual code was correct. I just generalised it in order to pose the question and that’s when the ‘j’ disappeared.

#7

Not sure what you mean by it doesn’t work, what exactly does not work for you?

This works for me, the image will take up 100% width of the parent card.

<div class="card" style="max-width: 540px;">
  <img class="card-img-top mx-auto d-block" src="https://via.placeholder.com/400" alt="an image">
  <div class="card-block">
    <h4 class="card-title">Title Text</h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </div>
</div>

Can you show a Codepen with your code so we can see what the problem is?

#8

use img img-responsive classes on img tag and they will be always centred if the image dimensions are shorter than the wrapper.

#9

Sorry, I’d never heard of Codepen. I’ll have a look at it.

#10

“use img img-responsive classes on img tag”
Can you give me an example please?

#11

Sorry, I missed the first question you asked: the image remains left justified when placed in the first card no matter what I put in the tags. I’ve set a three column card block and the image is 160px x 140px.

#13

Without some code to look at it is hard to say what the problem is. If you can post your card setup in a Codepen we can take a look at it.

Here is a quick three column card layout.

#15

Just FYI, the image class depends on the bootstrap version (v4 vs v3).

But for the OP’s question, it doesn’t matter, the cards are using the card-img-top class (the card component is bootstrap v4 only).

#16

True, img responsive was used in BS3, img fluid in BS4

#17

I appreciate your interest and thank you for it. The code is there in my first post! Codepen is alien to me. I use Atom and Dreamweaver for development. Nobody is familiar with every development environment. I do not have time to familiarise myself with ‘Codepen’ - sorry!

#18