twitter-bootstrap Migrating to Bootstrap 4 Bootstrap 4 Centering
Example
How to center an element, column, or content inside a column works differently in Bootstrap 4.
Horizontal Center
text-centeris still used fordisplay:inlineelementsmx-autoreplacescenter-blockto centerdisplay:blockelementsoffset-*ormx-autocan be used to center grid columns
mx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.
Center text or inline elements:
text-center
<div class="container">
<h1 class="text-center">i'm centered</h1>
<div class="row">
<div class="col text-center">i'm centered!</div>
</div>
</div>
Center display:block or display:flex:
mx-auto
<div class="row">
<div class="col-12">
<img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
</div>
</div>
Center columns using offsets: offset-*
<div class="row">
<div class="col-4 offset-4">
<h6>I'm .col-4 centered (offset 4)
</div>
</div>
Columns can also be centered with: mx-auto
<div class="row">
<div class="col-4 mx-auto">
<h6>I'm .col-4 centered</h6>
</div>
</div>
Demo Bootstrap 4 Horizontal Centering
Vertical Center
For vertical centering in Bootstrap 4 (y-axis), see the docs on: Bootstrap 4 Vertical Align
