Trying to master the art of using Bootstrap 4 has been quite a journey. At first, everything seemed to work smoothly as I attempted to horizontally center some text within a full-sized jumbotron. However, things took an unexpected turn when I decided to impose a max-width on that text container – suddenly, all the text shifted to the left-hand side of the jumbotron.
After some trial and error, I discovered that adding the class "d-flex justify-content-center align-items-center" managed to resolve the issue. But as soon as I included the style "max-width: 600px", the alignment broke again, leaving the text escaped to the far left.
Below is the snippet of code that reflects my current dilemma:
<div class="jumbotron">
<h1 class="display-4 text-sm-center">Main Header</h1>
<div style="max-width: 600px" class="d-flex justify-content-center align-items-center">
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</div>
</div>
My ultimate goal is to have the text confined within a max-width of 600px while maintaining its horizontal center within the jumbotron.