Wat zijn de meest voorkomende manieren om tekst links uit te lijnen en andere tekst rechts uit te lijnen binnen een div container in bootstrap?
Bijv.
Total cost $42
Bovenstaande totale kosten moeten links uitgelijnde tekst zijn en $42 is rechts uitgelijnde tekst
***2018 Update...
Bootstrap 4.1+
pull-right
is nu float-right
text-right
is hetzelfde als 3.x, en werkt voor inline elementenfloat-*
als text-*
zijn responsive voor verschillende uitlijning bij verschillende breedtes (dus: float-sm-right
)De flexbox utils (bv:justify-content-between
) kunnen ook gebruikt worden voor uitlijning:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
of, auto-marges (bv:ml-auto
) in elke flexbox container (rij, navbar, kaart, d-flex, etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Uitlijn Demo
Bootstrap 4 Rechts uitlijnen voorbeelden(float, flexbox, tekst-rechts, enz...)
Bootstrap 3
Gebruik de pull-right
klasse...
<div class="container">
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6"><span class="pull-right">$42</span></div>
</div>
</div>
Je kunt ook de text-right
klasse gebruiken zoals dit:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
In plaats van de pull-right
class te gebruiken, is het beter om de text-right
class in de kolom te gebruiken, omdat pull-right
soms problemen geeft bij het resizen van de pagina.
<div class="row">
<div class="col-xs-6 col-sm-4">Total cost</div>
<div class="col-xs-6 col-sm-4"></div>
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">$42</div>
</div>
Dat zou het werk goed moeten doen.