I recently started working with twitter bootstrap 4.4.1 and flex to create a unique layout for my project. My main goal is to have a navbar at the top and the content displayed in the middle of the screen, as shown in the image here: https://i.sstatic.net/Hz29d.png
To achieve this, I have been using the following code which can also be viewed on jsfiddle here:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-light bg-light">
<div class="col-md-12 d-flex align-items-start justify-content-end">
<button class="btn btn-warning btn-large">Large</button>
</div>
</nav>
<div class="row d-flex align-self-center">
<div class="col-12 mx-auto">
<div class="jumbotron text-center">
Some text
</div>
</div>
</div>
</div>Despite trying several approaches, I have been struggling to center the text block on the screen. As someone new to the layout/grid/flex system, I find it challenging to navigate. Any assistance or guidance on this matter would be highly appreciated!