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>