How to align form at the center of the page using bootstrap – Twitter bootstrap

I am using twitter-bootstrap for styling. I have login the form and i am trying to get the form at the center of page. Most of the suggestions here on stackoverflow suggesting to put elements inside container class and thats what i am doing.
Requirement is The login form needs to have some background color and it needs to be at the center of the form. I have created a CSS class .login-dialog and applied that on div which is a wrapper around form

However there are issues:
-The whole row is getting background color
-The form and its controls are not aligning at the center
-There is lot of extra background on the right
(please see the picture below)

I can certainly fix this using table but i dont want to use any fix width solution. Can someone please help me on 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