¿Cuáles son las formas más comunes de alinear a la izquierda un texto y a la derecha otro dentro de un contenedor div en bootstrap?
Por ejemplo
Total cost $42
El coste total de arriba debe ser un texto alineado a la izquierda y $42 es un texto alineado a la derecha
***La actualización del año 2018...
Bootstrap 4.1+
pull-right
es ahora float-right
text-right
es lo mismo que en 3.x, y funciona para elementos en líneafloat-*
como text-*
son responsive para diferentes alineaciones en diferentes anchos (por ejemplo: float-sm-right
)Las utilidades de flexbox (ej.: justify-content-between
) también pueden utilizarse para la alineación:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
o, auto-margenes (eg:ml-auto
) en cualquier contenedor flexbox (row,navbar,card,d-flex,etc...)
<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)
Bootstrap 3
Utiliza la clase pull-right
..
<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>
También puedes usar la clase text-right
así:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
En lugar de usar la clase pull-right
, es mejor usar la clase text-right
en la columna, porque pull-right
crea problemas a veces al redimensionar la página.
<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>
Eso debería hacer el trabajo bien