Ik'm probeer een zeer eenvoudig voorbeeld te volgen. Gebruikmakend van de startpagina en het rastersysteem, hoopte ik het volgende:
<div class="row">
<div class="span12">
<h1>Bootstrap starter template</h1>
<p>Example text.</p>
</div>
</div>
...zou gecentreerde tekst opleveren.
Het verschijnt echter nog steeds helemaal links. Wat doe ik verkeerd?
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
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.