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?)
So:
-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!