Bootstrap Center align a div horizontally

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


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>

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

For example:

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