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:
.mydiv {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
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.
HTML and CSS are not true programming languages, which may be why, as a programmer, you're struggling with them. HTML is a markup language, and CSS is a styling language. HTML is fairly straightforward, and doesn't take much to understand. CSS can become very complex, especially with how the cascade works, and the many different things that have been added on to it over the years. When it first started it was pretty simple. Make text red.... make a background yellow, or give it an image. Now you can do animations, and complex responsive layouts, there a pseudo-classes and I've seen some truly amazing effects done with pure CSS that could have only been done with javascript (or Flash) years ago. I'm competent with CSS, but certainly no expert, and I often have to refer to WC3 for reference to the usage of things I don't use often, and I would be lost without Stack Overflow for more complex things.
Stick with it. You'll eventually get it figured out, and soon find that BSS is a major boon to you website development.