Bootstrap Center align a div horizontally

Question

I have tried simple login page for a sample. But am unable to align the fields to center. h:commandButton is aligned to center. but rest of the fields are does't have any change while keep <div align="center">

How do i keep them center aligned?

<div align="center">            
    <h:message for="btnSubmit"/>
    <div class='form-row'>
        <div class='col-xs-2 form-group required'>
         <label class='control-label'> User Name </label>
          <h:inputText styleClass="form-control" size="12" maxlength="20" 
                       id="userName" value="#{loginController.userName}" 
                       required="true"/>
        </div>
    </div>

    <div class='form-row'>
        <div class='col-xs-2 form-group card required'>
           <label class='control-label'>Password</label>
           <h:inputText styleClass="form-control" size="12" maxlength="20"
                        id="password" value="#{loginController.password}"
                        required="true" />
         </div>
    </div>

    <div class='form-row'>
        div class='col-md-12 form-group'>
      <h:commandButton styleClass="btn btn-success" 
               value="#{bundle['label.Login']}" id="btnSubmit" 
               action="#{loginController.clientLoginAction}"/>
        </div>
    </div>
</div>

Answer 1

To center a block level element horizontally in bootstrap use Use center-block class.

For example:

<div class="center-block">...</div>

Answer 2

simplest way is to add a custom class .col-center from your side to it

.col-center{
  margin:0 auto;
}

why this way?? because BS has the methodology of offset but it has a drawback as it only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8 and col-X-10 are supported.

Must do : just make sure that whichever div you want to center, has a div width mentioned to it.....col-center will do rest of job

Answer 3

As of 2019 Oct, class="center-block" is dropped and "mx-auto" is introduced for the same purpose in current bootstrap version.

<div class="mx-auto bg-warning" style="width:150px">Centered</div>