Struggling to master Bootstrap functionalities, I'm facing challenges when it comes to aligning 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 current outcome is:
https://i.sstatic.net/4OFA7.png
Employing the latest versions of Bootstrap and AngularJS to incorporate my form in the code snippet below:
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main" class="mainContainer" >
<div ng-view
style="height:100%"></div>
</div>
My CSS tweaks:
.mainContainer {
float: none;
margin-left: auto;
margin-right: auto;
text-align: center;
width:100%;
}
The objective remains to centrally align my login form horizontally and ensure that labels are positioned correctly as illustrated in this example:
https://i.sstatic.net/JE6UF.png
(source image from this discussion thread: bootstrap form input fields alignment)