I am required to show form vertically center inside container-fluid so I developed my own code for the same.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style>
.container-fluid
{
display: table-cell;
height: 100vh;
width: 100vw !important;
vertical-align: middle;
border:1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-8 offset-2">
<div class="card shadow">
<div class="card-header bg-danger text-white">
<h2>Login</h2>
</div>
<div class="card-body">
<form action="">
<div class="form-group row">
<label for="txtemail" class="col-form-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="email" name="txtemail" id="txtemail" class="form-control" required />
</div>
</div>
<div class="form-group row">
<label for="txtpassword" class="col-form-label col-sm-2">Password</label>
<div class="col-sm-10">
<input type="password" name="txtpassword" id="txtpassword" class="form-control"
required />
</div>
</div>
<div class="form-group">
<button class="btn btn-danger btn-block">Login</button>
<button class="btn btn-warning btn-block">clear all</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>