title: Bootstrap Center align a div horizontally
body: <p>I have tried simple login page for a sample. But am unable to align the fields to center.  <code>h:commandButton</code> is aligned to center. but rest of the fields are does't have any change while keep <code>&lt;div align="center"&gt;</code> </p>
  
  <p>How do i keep them center aligned?</p>
  
  <pre><code>&lt;div align="center"&gt;            
      &lt;h:message for="btnSubmit"/&gt;
      &lt;div class='form-row'&gt;
          &lt;div class='col-xs-2 form-group required'&gt;
           &lt;label class='control-label'&gt; User Name &lt;/label&gt;
            &lt;h:inputText styleClass="form-control" size="12" maxlength="20" 
                         id="userName" value="#{loginController.userName}" 
                         required="true"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class='form-row'&gt;
          &lt;div class='col-xs-2 form-group card required'&gt;
             &lt;label class='control-label'&gt;Password&lt;/label&gt;
             &lt;h:inputText styleClass="form-control" size="12" maxlength="20"
                          id="password" value="#{loginController.password}"
                          required="true" /&gt;
           &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class='form-row'&gt;
          div class='col-md-12 form-group'&gt;
        &lt;h:commandButton styleClass="btn btn-success" 
                 value="#{bundle['label.Login']}" id="btnSubmit" 
                 action="#{loginController.clientLoginAction}"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>