After searching extensively on Google and various websites, I am still struggling to find a solution for vertically aligning columns to be centered. Many sources I found mention aligning horizontally, but none seem to address the issue of vertical alignment. Even examples on Bootply and other platforms only demonstrate horizontal centering techniques.
I tried following the guidelines on Bootstrap's official website, which suggest using the classes align-items-center on the row or align-content-center on the column. However, these solutions do not work for me at all, and I do not see any changes in the alignment of my columns.
I am left wondering what mistake I might be making in implementing these instructions.
Here is the guide I referenced: http://getbootstrap.com/docs/4.0/layout/grid/#alignment
For this project, I am utilizing the latest version of Bootstrap v4.0.0.beta-2.
Below is an excerpt from my code:
<div class="container">
<div class="row align-items-center">
<div class="col-3"><span>test</span></div>
</div>
</div>
Expected outcome: The column containing the text "test" should be vertically centered on the page.
Actual outcome: The text is currently displayed in the top left corner of the page.