How to Properly Center Content in Bootstrap Columns?

Aligning Content in Bootstrap Columns

When working with Bootstrap columns, aligning the content within them can sometimes present challenges. One common requirement is to center the content both horizontally and vertically. This article explains how to achieve this using Bootstrap classes.

In the following HTML, the attempt to center the content of the column using the "center-block" class does not seem to work.

<code class="html"><div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
</div></code>

To resolve this, use the "align" attribute instead of the "center-block" class.

<code class="html"><!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">
<p>Additionally, Bootstrap 3 offers the "text-center" class, and Bootstrap 4 provides the "d-flex justify-content-center" class for more concise and modern alignment.</p>
<pre class="brush:php;toolbar:false"><code class="html"><!-- recommended method -->
<div class="col-xs-1 text-center">

<!-- Bootstrap 4 -->
<div class="d-flex justify-content-center">
   <div>some content</div>
</div>
<p>Note that Bootstrap 4's flex classes will center content along the x-axis by default, unless "flex-direction" is set to "column."</p>
</div></code>