How to keep collapsed Bootstrap columns centered

Question

I am trying to keep some Bootstrap columns centered when the columns wrap around when the screen is shrunk.

My code looks like this:

    <div class="container">       
         <div class="row">
            <div class="col-md-2">    
            </div>
            <div class="col-md-8 text-center">
            	<div style="font-size:36px;">Page Title</div> 
            </div>
            <div class="col-md-2">          
            </div>
        </div>  
        
        <div class="row text-center">
            <div class="col-md-2">    
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">WWW</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">XXX</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">YYY</div>  
            </div>
            <div class="col-md-2">
                 <div class="text-left" style="float:left;width:25%;">ZZZ</div>  
            </div>
            <div class="col-md-2">         
            </div>
        </div> 
      </div>

In the code above the 'Page Title' text stays centered horizontally on the screen as the screen width is reduced which is exactly what I want. I also want the four columns to stay centered horizontally when collapsed down to two columns and then when collapsed down to one column but the code above results in the columns being left aligned in the col-md-8 when wrapped. Is it possible to ensure that however the col-md-2 columns are wrapped they stay centered horizontally?

Answer 1

Your content is being left-aligned within their container divs by the class text-left. If you use the Bootstrap class text-center it will be centered.

Also regarding your column layout, I think you're working against the Bootstrap styles with those inline widths. I'd remove them and try using Bootstrap's own classes, like this:

<div class="container">       
     <div class="row">
        <div class="col-md-2">    
        </div>
        <div class="col-md-8 text-center">
            <div style="font-size:36px;">Page Title</div> 
        </div>
        <div class="col-md-2">          
        </div>
    </div>  

    <div class="row text-center">
        <div class="col-xs-12 col-sm-6 col-md-2 text-center">???    
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">WWW</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">XXX</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">YYY</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2">
             <div class="text-center">ZZZ</div>  
        </div>
        <div class="col-xs-12 col-sm-6 col-md-2 text-center">???         
        </div>
    </div> 
  </div>

This will give you full-width columns on each div at the "xs" size (extra small, or mobile), then at the "sm" size (small) they'll grow to be 50%, then at md (medium) they'll shrink to be 1/6th.

Here's a bootply for your reference: http://www.bootply.com/t9XqPsBOpB