Mastering TypeScript 3 - Third Edition

Creating a login panel

The HTML that we have generated forms the basis of a centered panel that we can use as a login panel. We would like the jumbotron to be centered within the page, both horizontally and vertically. Let's apply some Bootstrap styles and CSS to accomplish this. So far, we have an outer element with a CSS class of 'container', and an inner element with the class of 'jumbotron'. Let's update the outer element as follows:

<div class="container h-100">    <div class="row align-items-center h-100">        <div class="col-6 mx-auto">            <div class="jumbotron">            ... jumbotron body ...            </div>        </div>    </div></div>

Here, we are showing the outer element with the CSS class of 'container', which also has a class of 'h-100'. This means that it will ...