I'm trying to learn Bootstrap possibilities, but I am having troubles to align my login form:

```
<form name="signup" class="span8 form-inline" ng-submit="signup.$valid && IsSubmitEnabled && loginController.validateLogin(utilisateur)" novalidate>

        <div class="row">
            <label class="control-label span1" for="username"  >{{ 'HOME_LOGIN_CONTENT_USERNAME' | translate }} : </label>
            <input class="form-control span7"  ng-model="utilisateur.login" Name="username" placeholder="{{ 'HOME_LOGIN_CONTENT_USERNAME' | translate }}" type="text" required/>
        </div>

        <div class="row">   
            <label class="control-label span1" for="password"  >{{ 'HOME_LOGIN_CONTENT_PASSWORD' | translate }} : </label>
            <input class="form-control span7"  ng-model="utilisateur.password" Name="password" placeholder="{{ 'HOME_LOGIN_CONTENT_PASSWORD' | translate }}" type="password" required />
        </div>

        <div class="row">
            <button type="submit" class="btn btn-primary">{{ 'HOME_LOGIN_CONTENT_VALIDATE' | translate }}</button>
        </div>

</form>

```

The result is: 

[![enter image description here](https://i.stack.imgur.com/4OFA7.png)](https://i.stack.imgur.com/4OFA7.png)

I'm using the last version of Bootstrap and AngularJS to load my form in the following code : 

```
<!-- MAIN CONTENT AND INJECTED VIEWS -->
        <div id="main" class="mainContainer" >

            <div ng-view 
            style="height:100%"></div>
        </div>

```

My CSS: 

```
    .mainContainer {
     float: none;
     margin-left: auto;
     margin-right: auto;
    text-align: center;
    width:100%;
}

```

My goal is to have my login form center horizontally and have labels aligned like in this example: 

[![enter image description here](https://i.stack.imgur.com/JE6UF.png)](https://i.stack.imgur.com/JE6UF.png)

(image taken from this thread: [bootstrap form input fields alignment](https://stackoverflow.com/questions/14526203/bootstrap-form-input-fields-alignment))