It’s 2020 and while there are many things I do know, there are still some trivial silly things I do not or always forget. Case in point being, how to centre columns in a Bootstrap 4 layout.
Unlike Bootstrap 3, Bootstrap 4 uses Flexbox and therefore, you have more options for centring your layouts. One such method is the justify-content-center class defined on the row which will align the columns center. Finally, you use the text-center class to middle align the content of the column.
My content
This works by using the Flexbox property for justifying the content. We can also specify a column is display: flex; and align its contents like so as well, which can work well in certain situations.
My content
In the above, you might notice we don’t use text-center to center the text, we just make the column d-flex which makes it a flex element and its children and be aligned.
Nothing overly fancy. This post serves as more of a reminder to myself, but if you find it useful then that is a win as well.