Utilizing twitter-bootstrap for styling, I have implemented a login form and am attempting to center it on the page. Most suggestions on stackoverflow advise placing elements inside the container class, which is what I have done.
The requirement is for the login form to have a background color and be centered on the page. To achieve this, I have created a CSS class called .login-dialog and applied it to a div wrapping the form.
However, I am encountering some issues:
- The entire row is being filled with the background color
- The form and its controls are not aligning at the center
- There is excess background space on the right side
(please refer to the image below)
I could resolve this using a table, but I want to avoid any fixed-width solutions. Can someone provide assistance with this?
<div class="container page-login">
<div class="login-control-padding">
<div class="row ng-hide" ng-show="model.errorMessage">
<div class="col-md-12 col-sm-12">
<div class="alert alert-danger ng-binding">
<strong>Error:</strong>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<span class="clientName ng-binding">Local Host Client</span>
</div>
</div>
<div class="row">
<div ng-show="model.loginUrl">
<div class="login-dialog">
<form name="form" class="form-horizontal ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength" role="form" action="/identity/login?signin=1111" method="post">
<input name="idsrv.xsrf" class="ng-isolate-scope" type="hidden" value="22222" token="model.antiForgery">
<div class="form-group">
<label class="control-label col-md-1" for="username">Username</label>
<div class="col-md-3">
<input name="username" class="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-maxlength ng-touched" id="username" autofocus="" required="" type="text" maxlength="100" placeholder="Username" ng-model="model.username">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-1" for="password">Password</label>
<div class="col-md-3">
<input name="password" class="form-control ng-pristine ng-untouched ng-isolate-scope ng-invalid ng-invalid-required ng-valid-maxlength" id="password" required="" type="password" maxlength="100" placeholder="Password" ng-model="model.password" focus-if="model.username" autocomplete="off">
</div>
</div>
<div class="form-group" ng-show="model.allowRememberMe">
<label class="control-label col-md-1" for="rememberMe"></label>
<div class="col-md-3">
<input name="rememberMe" class="ng-pristine ng-untouched ng-valid" id="rememberMe" type="checkbox" value="true" ng-model="model.rememberMe">
<span>Remember Me</span>
<button class="btn btn-default pull-right">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
CSS class
.login-dialog{
background-color:rgb(40, 147, 194);
border:solid;
border-width:1px;
border-radius:5px;
border-color:rgb(28, 104, 137);
color:white;
padding-top:10px;
}
.login-control-padding {
padding-top: 30px;
}
Output