For a simple "login" page, I came across this template:
HTML:
<div class="d-flex align-items-center flex-column justify-content-center h-100 bg-dark text-white" id="header">
<h1 class="display-4">Hello.</h1>
<form>
<div class="form-group">
<input class="form-control form-control-lg" placeholder="Email" type="text">
</div>
<div class="form-group">
<input class="form-control form-control-lg" placeholder="Password" type="text">
</div>
<div class="form-group">
<button class="btn btn-info btn-lg btn-block">Sign In</button>
</div>
</form>
</div>
<div class="container" id="content">
<div class="row h-100 mt-5">
<main class="col-md-6">
<h1>Content...</h1>
</main>
</div>
</div>
CSS:
body,html {
height: 100%;
}
The layout is great and easy to adjust, but I want the "Hello." to be centered both vertically and horizontally on the left-hand side, taking up 9/12 of the space, with the form taking the remaining 3/12.
When I try to separate the columns, I lose the full screen. Another issue is replacing the "Content..." with a permanent footer taking up approximately 15% of the page.
I have a rough idea of the design I want, which you can see in this MS Paint sketch: https://i.sstatic.net/LVbp4.png
I envision this as a non-scrollable page.
Thank you for your help and suggestions!