I'estou a tentar seguir um exemplo muito básico. Usando a página inicial e o sistema de grid, eu estava esperando o seguinte:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
...produziria um texto centrado.
No entanto, ainda aparece na extrema esquerda. O que estou a fazer de errado?
Para outros tipos de conteúdo, veja Flavien's answer.
**Atualização: Bootstrap 2.3.0+ Resposta***
A resposta original era para uma versão inicial de bootstrap. A partir do bootstrap 2.3.0, ** você pode simplesmente dar ao div a classe .text-center
***.
Respostariginal (pré 2.3.0)
Você precisa definir uma das duas classes, row
ou span12
com um text-align: center
. Veja
A melhor maneira de fazer isso é definir um estilo css:
.centered-text {
text-align:center
}
Então onde quer que você precise de texto centralizado, você adiciona assim:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
ou se só queres a etiqueta p centrada:
<div class="row">
<div class="span12 centered-text">
<h1>Bootstrap starter template</h1>
<p class="centered-text">Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div>
</div>
Quanto menos css em linha você usar, melhor.