Hoe krijg je gecentreerde inhoud met behulp van Twitter Bootstrap?

Dit is voor Tekst Centreren (waar de vraag over ging)

Voor andere soorten inhoud, zie Flavien's antwoord.

Update: Bootstrap 2.3.0+ Antwoord

Het oorspronkelijke antwoord was voor een vroege versie van bootstrap. Vanaf bootstrap 2.3.0, kun je de div simpelweg de class .text-center geven.

Oorspronkelijk antwoord (pre 2.3.0)

Je moet een van de twee klassen definiëren, row of span12 met een text-align: center. Zie http://jsfiddle.net/xKSUH/ of http://jsfiddle.net/xKSUH/1/

De beste manier om dit te doen is een css-stijl te definiëren:

.centered-text {
    text-align:center
}    

Waar je dan ook gecentreerde tekst nodig hebt, voeg je het als volgt toe:

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

of als je alleen de p tag gecentreerd wilt hebben:

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

Hoe minder inline css je gebruikt, hoe beter.

De klasse .show-grid past gecentreerd uitgelijnde tekst toe in het voorbeeld in de link.

Je kunt altijd style="text-align:center" toevoegen aan je rij div of een andere class zou ik denken.