Make sure to include the necessary bootstrap CSS and JS links in your code snippet. Additionally, don't forget to set the width of the input tag to 100% for better responsiveness.
Take a look at this sample code below, which demonstrates how to style login buttons and input fields:
.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;
}
Don't forget to add the essential HTML structure with proper linking of external files for Bootstrap and jQuery:
<!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>
<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>