Confused about seemingly different built-in class names for Bootstrap

I’ve been watching vids and reading up on Bootstrap, just to learn any features and attributes I may not have been aware of… as well as to nail down how to properly address some difficulty/confusion I have had regarding centering content within columns. It all made sense, until I actually tried it.

In one tutorial series, I was introduced to the ‘img-responsive’ and ‘center-block’ built-in classes, which seemed like perfect solutions to the issues I was struggling with. But, when I manually included them within my img tag (via ‘class=’), I found they didn’t seem to be recognized as pre-existing classes.

So, I browsed the existing classes via the full list in the Add Class window, and was further confused by what I was seeing… I saw things like ‘imagag-respo’ and other ‘fragments/variations’ of the target name, plus it seemed like Pinegrow used the name ‘img-fluid’ in place of ‘img-responsive’. So, I’m kind of confused as to what all that is about.

The main thing I was trying to address was horizontally centering an image which is smaller than the column, as well as preventing it from extending past the column’s borders when the column was smaller than the image.

It seemed like that would be solved by ‘img-responsive’ to address the extension past the border, and ‘center-block’ to address the centering, but even though it worked great in the video, it appears to do nothing when I try it (…This wasn’t something that changed between Bootstrap 3 and 4, was it?)

-What is the proper/Pinegrow equivalent to ‘img-responsive’ (making the image scale down when the column becomes smaller than the contained image)?
-What is the proper/Pinegrow equivalent to ‘block-center’ (making an image that is smaller than the column center itself within that column)?
-Why am I seeing all kinds of ‘fragments’ of class names in the full list in the Add/Remove Class window (ex. imagag-respons’?
-Are the ‘img-responsive’ and ‘center-block’ classes no longer part of Bootstrap’s built in library?

UPDATE: I just found an article online, where it was claimed that they DID in fact rename img-responsive to img-fluid for Bootstrap v4 (to avoid confusion in future). Okay, cool… but, it still doesn’t appear to work for me (and as far as I can see, I’m doing everything the same as in the video). I did get it to center, by applying a text center to the column… but, I’m not sure if that’s the right way to do things (as opposed to using img-fluid’ on the image itself).

UPDATE 2: I now also found an article where someone pointed out that ‘center-block’ has now been replaced by mx-auto in Bootstrap v4. I’ll have to test if that works for me.

UPDATE3: So, from what I understand now, you leave the column alone, and apply ‘img-fluid mx-auto d-block’ to the image, to properly center it and make it behave nicely when the column is either bigger or smaller than the image it contains. Seems to work… Just wanted to make sure that is the current and proper way, as it appears the rules have changed since Bootstrap 3.

I’m still interested in the question about the fragment/variation names I’m seeing in the full CSS rule list, though!

Another way if you are working with a single column and you want to center the column itself, just say your column has a class of col-sm-6 you can then add a class of offset-sm-3 to center that column.

Hi, SureWeb. Yep, for sure. I’ll be using offset for some items. I just learned about offsets and push/pull yesterday.

Weird, I’m still struggling with centering sometimes… Just doesn’t seem to work sometimes, and I have to resort to things like text aligning features. I have two seemingly identical row/column items, yet one responds to the img-fluid d-block mx-auto method, and the other doesn’t (but does respond to text centering). I don’t see any difference between the two elements, so I’m not sure why one works and the other doesn’t.