twitter-bootstrap Bootstrap 4 Centering


Example

How to center an element, column, or content inside a column works differently in Bootstrap 4.

Horizontal Center

  • text-center is still used for display:inline elements
  • mx-auto replaces center-block to center display:block elements
  • offset-* or mx-auto can 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