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.
<div class="container"> <div class="row justify-content-center"> <div class="col-6 text-center"> <p>My content</p> </div> </div> </div>
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.
<div class="container"> <div class="row"> <div class="col d-flex justify-content-center"> <p>My content</p> </div> </div> </div>
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.
Hey, the smaller-than angle bracket is not properly escaped in the code examples
Thanks, Daniel. All fixed up now.