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"></code>

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.

<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></code>

Note that Bootstrap 4's flex classes will center content along the x-axis by default, unless "flex-direction" is set to "column."

The above is the detailed content of How to Properly Center Content in Bootstrap Columns?. For more information, please follow other related articles on the PHP Chinese website!