You didn’t include any bootstrap css or js links. And you need to give width: 100% to the input tag.
Check out this example.
It is responsive
.login-btn, .btn.login-btn {
border-radius: 8px;
text-align: center;
min-height: 44px;
min-width: 140px;
font-weight: 200;
font-size: 20px;
padding: 0 10px;
margin: 20px;
}
.login-cont input[type="text"], .login-cont input[type="password"] {
border: 1px solid #61839C;
height: 44px;
font-size: 20px;
width: 100%;
font-size: 20px;
padding: 0 10px;
font-weight: 300;
display: block;
margin-top: 20px;
padding-left: 20px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="centering text-center">
<div class="login-cont col-md-4 col-md-offset-4 vcenter">
<form id="login_form" name="login-form" #f="ngForm" role="form" (ngSubmit)="f.form.valid && login()" novalidate>
<label id="loginError" class="login-error"></label>
<img src="https://www.islonline.com/static/v7/images/logo-islonline.svg" class="img-responsive" alt="logo" width="334" height="100">
<input id="username" class="form-control" type="text" name="username" placeholder="Username" [(ngModel)]="username" required>
<!--div *ngIf="f.submitted && username.invalid">Username is required</div-->
<input id="userPassword" class="form-control" type="password" name="userPassword" required placeholder="Password" [(ngModel)]="password">
<div class="forgot-password-form">
<span>Forgot Password ?</span>
</div>
<button type="submit" class="btn login-btn">Login</button>
</form>
</div>
</div>
</div>
</div>