Geek Answers Handbook

Center Bootstrap aligns div horizontally

I tried a simple login page for a sample. But I can’t align the fields in the center. h:commandButton is centered. but the rest of the fields do not have any changes, keeping <div align="center">

How to keep center alignment?

 <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>
+8
jquery html css twitter-bootstrap
source share
3 answers

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

 .col-center{ margin:0 auto; }

why is that? , because BS has an offset methodology, but it has a drawback because it only works for even-sized columns, so only .col-X-2 , .col-X-4 , col-X-6 , col-X-8 and col-X-10 .

Be sure to follow these steps: just make sure that any div that you want to center has the div width .col-center .... .col-center will do the rest of the work

+11
source share

To center the block level element horizontally in the boot, use the center-block class.

For example:

 <div class="center-block">...</div>
+4
source share

In 2019, October class = "center-block" is dropped and should use "mx-auto" for the latest version of the bootstrap.

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

More articles:


All Articles