Como manter as colunas do Bootstrap recolhidas centralizadas - html, css, twitter-bootstrap

Estou tentando manter algumas colunas do Bootstrap centralizadas quando as colunas são agrupadas quando a tela é reduzida.

Meu código é assim:

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

No código acima, o texto "Título da página" permanececentralizado horizontalmente na tela conforme a largura da tela é reduzida, exatamente o que eu quero. Também quero que as quatro colunas fiquem centralizadas horizontalmente quando reduzidas para duas colunas e depois reduzidas para uma coluna, mas o código acima resulta nas colunas sendo alinhadas no col-md-8 quando quebradas. É possível garantir que, no entanto, as colunas col-md-2 estejam agrupadas e permaneçam centralizadas horizontalmente?

Respostas:

Seu conteúdo está sendo alinhado à esquerda dentro do contêiner divs pela classe text-left. Se você usar a classe Bootstrap text-center será centralizado.

Também em relação ao layout da coluna, acho que você está trabalhando com os estilos do Bootstrap com essas larguras embutidas. Eu os removia e tentava usar as próprias classes do Bootstrap, assim:

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

Isso fornecerá colunas de largura total em cada div no tamanho "xs" (extra pequeno ou móvel), depois no tamanho "sm" (pequeno) elas crescerão 50% e, em seguida, em md (médio) eles encolherão para 1/6.

Aqui está um bootply para sua referência: http://www.bootply.com/t9XqPsBOpB