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

Answer 1

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 2

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>

Answer 3

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

For example:

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