I have to agree with Jo. It's simply a matter of understanding the underlying technology (like Flexbox) and then how to implement it through BSS. Of the two, the latter can sometimes be the more frustrating, because while there are tons of online websites for learning Flexbox, most BSS questions end up getting answered here in the forums by more experienced users. There is a BSS Facebook group that is absolutely useless. You might find an occasional Q/A on Quora, but they're few and far between. Basically, all the program support for BSS comes from this forum, and about a dozen dedicated users.
@David2 Another simple centering trick. If you drop an image into a column, it will be left justified. If you set the text alignment to center, it will also center the image. The text component and image component are treated the same way, as inline-block elements. You add a div, create a class as follows:
} Assign it to the div and it will be centered. But this is the old way of doing things.
With Flexbox you no longer need to do this. Working at mobile viewport size (since Bootstrap is a mobile-first framework,) delete the
display: inline-block; on the mydiv class. Then go to flexbox section of the Options panel, select the parent column and simply click on the "center" icon. This will assign the classes to the column
d-flex class, and the
justify-content-center and your box is centered.
If you want to start stacking elements, (like text on top of your box) then you have to start using CSS position values, z-index, OR switch to CSS grid, which has provisions for stuff like this.
Stick with it. You'll eventually get it figured out, and soon find that BSS is a major boon to you website development.