<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
<div class="login-form mx-auto d-block w-100">
<div class="page-header text-center">
<h1>Login</h1>
</div>
<form action="/astroidnew/index.php/pages/login?task=user.login" method="post" class="form-validate" _lpchecked="1">
<div class="form-group">
<div class="control-label">
<label id="username-lbl" for="username" class="required invalid">Username<span class="star">·*</span></label>
</div>
<div class="controls">
<input name="username" id="username" value="" class="validate-username required form-control invalid" size="25" required="required" aria-required="true" autofocus="" aria-invalid="true" type="text">
</div>
</div>
<div class="form-group">
<div class="control-label">
<label id="password-lbl" for="password" class="required">Password<span class="star">·*</span></label>
<a class="float-right" href="/astroidnew/index.php/your-profile?view=reset">Forgot your password?</a>
</div>
<div class="controls">
<input name="password" id="password" value="" class="validate-password required form-control" size="25" maxlength="99" required="required" aria-required="true" type="password">
</div>
</div>
<div class="d-flex justify-content-between">
<div class="form-group d-flex justify-content-start">
<div class="controls">
<button type="submit" class="btn btn-primary">Log in</button>
</div>
</div>
<div class="form-check form-group d-flex justify-content-end">
<label class="form-check-label"><input type="checkbox" class="form-check-input">Check me out</label>
</div>
