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!