The code runs successfully, but I am struggling to get the desired output. You can find the code here.
<div class="modal fade" id="signup" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<form name="registration" ngnovalidate="" class="ng-pristine ng-invalid ng-invalid-required ng-valid-pattern ng-valid-email ng-valid-minlength">
<div class="modal-header ng-scope">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="modal-title">Registration</h4>
</div>
<div class="modal-body ng-scope" id="modalbody">
<div class="col-sm-offset-1 col-sm-10">
<input type="text" name="username" id="username" placeholder="Username" ng-model="user.username" ng-required="true" ng-pattern="/^[a-zA-Z0-9]*$/" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
<p ng-show="registration.username.$touched && registration.username.$error.required" class="ng-hide">Please enter a Username!</p>
<p ng-show="registration.username.$error.pattern" class="ng-hide">Please enter a Valid Username (No special characters)!</p>
<input type="email" name="email" id="email" placeholder="Email" ng-model="user.email" ng-required="true" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" class="ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required ng-valid-pattern" required="required"><br>
<p ng-show="registration.email.$invalid && registration.email.$touched" class="ng-hide">Please enter a valid email!</p>
<input type="password" name="password1" id="password1" placeholder="Password" ng-model="user.password1" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
<p ng-show="registration.password1.$invalid && registration.password1.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>
<input type="password" name="password2" id="password2" placeholder="Confirm Password" ng-model="user.password2" ng-required="true" ng-minlength="6" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-minlength" required="required"><br>
<p ng-show="registration.password2.$invalid && registration.password2.$touched" class="ng-hide">Passwords must be at least 6 characters!</p>
</div>
</form>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" ng-click="submit(user)">
</div>
</div>
</div>
I am attempting to center the form and ensure it is correctly positioned in the header, body, and footer sections. However, whenever I make changes to the code or CSS, the form seems to move out of place from the body section and the footer gets misaligned. I am unsure if this issue is due to using Bootstrap and AngularJS.