Center align text in 5 columns layouts in Bootstrap

How to center align text in Bootstrap 5 column layout grids?

In the previous post, we learnt about responsive layout in Bootstrap. In this post, we shall learn how to center align text and images inside Bootstrap columns layout.

By default when we write text inside Bootstrap columns layout, it goes to left align so here we shall make them center aligned.

In below code snippet, we have 5 column structure having image in them, the first and last column is just a placeholder to look remaining columns center aligned.

The div with clearfix is kept so that when the browser window is resized to extra-small, it shows and for remaining screens it is hidden so that other columns appear in a single row.

The div with offset basically hides so an extra div with col-xxx are written for respective window.

<div class="row">
      <div class="col-md-12" style="padding:0;">            
            <div class="text-center">
                <div class="col-md-1 col-sm-1 col-xs-1"></div>
                <div class="col-md-2 col-md-offset-0 col-sm-2 col-sm-offset-0 col-xs-5 col-xs-offset-1 center-block">
                    <img src="http://techfunda.com/Images/TechFunda.gif" />
                </div>
                <div class="col-md-2 col-md-offset-0 col-sm-2 col-sm-offset-0 col-xs-5 col-xs-offset-1 center-block">
                    <img src="http://techfunda.com/Images/TechFunda.gif" />
                </div>
                <div class="clearfix hidden-md hidden-lg hidden-sm"></div>
                <div class="col-md-1 col-sm-1 col-xs-1 hidden-md hidden-lg hidden-sm"></div>
                <div class="col-md-2 col-md-offset-0 col-sm-2 col-sm-offset-0 col-xs-5 col-xs-offset-1 center-block">
                    <img src="http://techfunda.com/Images/TechFunda.gif" />
                </div>
                <div class="col-md-2 col-md-offset-0 col-sm-2 col-sm-offset-0 col-xs-5 col-xs-offset-1 center-block">
                    <img src="http://techfunda.com/Images/TechFunda.gif" />
                </div>
                <div class="clearfix hidden-md hidden-lg hidden-sm"></div>
                <div class="col-md-1 col-sm-1 col-xs-1 hidden-md hidden-lg hidden-sm"></div>
                <div class="col-md-2 col-md-offset-0 col-sm-2 col-sm-offset-0 col-xs-5 col-xs-offset-1 center-block">
                    <img src="http://techfunda.com/Images/TechFunda.gif" />
                </div>
                <div class="col-md-1 col-sm-1 col-xs-1">
                </div>
            </div>
    </div>
</div>