Utilizing bootstrap 4 beta, my goal is to center a line of text inside a column and ensure that if the text exceeds the line width, it wraps to the next line.
I attempted to achieve this by using justify-content-center on the row in combination with col-auto on the column. While the centering works correctly, the text does not wrap to the next line as expected.
Here's what I observed:
The text nicely centers when it's short: https://i.sstatic.net/qacgs.png
However, for long text in Chrome, it doesn't wrap to the next line: https://i.sstatic.net/VEnhH.png
Below is the code snippet:
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9f4bbbcadb8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row justify-content-xl-center justify-content-lg-center justify-content-md-center justify-content-sm-center justify-content-center" style="background:red">
<div class="col col-xl-auto col-lg-auto col-md-auto col-sm-auto col-auto">
A very long title is printed here in this example. I wonder why it doesn't wrap to the next line?
</div>
</div>
</div>For reference, here is a JSFiddle.