Currently, I'm utilizing Angular Bootstrap for my development needs.
Upon viewing the page in a browser, I noticed some extra white space at the bottom, and I can't seem to identify the cause.
Below is the base code being used. The modifications made that resulted in the displayed white space are shown on the Actual Page.
<div class="container-fluid">
<div class="row" style="background-color: burlywood;">
<div class="col-md-9">
Left Box
</div>
<div class="col-md-3">
Right Box
</div>
</div>
</div>Included below are the files I am working with.
Could you help me pinpoint where I might be going wrong?
Current versions:
Angular CLI: 8.3.23
Node: 12.14.1
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.803.23
@angular-devkit/build-angular 0.803.23
@angular-devkit/build-optimizer 0.803.23
@angular-devkit/build-webpack 0.803.23
@angular-devkit/core 7.3.8
@angular-devkit/schematics 8.3.23
@angular/cdk 8.0.1
@angular/cli 8.3.23
@angular/flex-layout 8.0.0-beta.26
@angular/material 8.0.1
@angular/material-moment-adapter 8.2.3
@ngtools/webpack 8.3.23
@schematics/angular 8.3.23
@schematics/update 0.803.23
rxjs 6.5.2
typescript 3.4.5
webpack 4.39.2
index.html
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<title>Trading</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<router-outlet></router-outlet>
Actual page: https://i.sstatic.net/7YGbH.png File: login.component.html
<div class="container-fluid">
<div class="row" style="background-color: burlywood;">
<div class="col-md-9">
Image goes here
</div>
<div class="col-md-3">
<!-- Material form login -->
<div class="card">
<h5 class="card-header info-color white-text text-center py-4">
<strong>Sign in</strong>
</h5>
<!--Card content-->
<div class="card-body px-lg-5 pt-0">
<!-- Form -->
<form class="text-center" style="color: #757575;" action="#!">
<!-- Email -->
<div class="md-form">
<input type="email" id="materialLoginFormEmail" class="form-control">
<label for="materialLoginFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="materialLoginFormPassword" class="form-control">
<label for="materialLoginFormPassword">Password</label>
</div>
<div class="d-flex justify-content-around">
<div>
<!-- Remember me -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="materialLoginFormRemember">
<label class="form-check-label" for="materialLoginFormRemember">Remember me</label>
</div>
</div>
<div>
<!-- Forgot password -->
<a href="">Forgot password?</a>
</div>
</div>
<!-- Sign in button -->
<button class="btn btn-outline-info btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign
in</button>
<!-- Register -->
<p>Not a member?
<a href="">Register</a>
</p>
<!-- Social login -->
<p>or sign in with:</p>
<a type="button" class="btn-floating btn-fb btn-sm">
<i class="fab fa-facebook-f"></i>
</a>
<a type="button" class="btn-floating btn-tw btn-sm">
<i class="fab fa-twitter"></i>
</a>
<a type="button" class="btn-floating btn-li btn-sm">
<i class="fab fa-linkedin-in"></i>
</a>
<a type="button" class="btn-floating btn-git btn-sm">
<i class="fab fa-github"></i>
</a>
</form>
<!-- Form -->
</div>
</div>
<!-- Material form login -->
</div>
</div>
</div>