twitter-bootstrap - elementos - centrar formulario bootstrap
Alinear a la izquierda y alinear a la derecha dentro de div en Bootstrap (6)
¿Cuáles son algunas de las formas comunes de alinear texto y alinear correctamente algún otro texto dentro de un contenedor div en bootstrap?
p.ej
Total cost $42
Por encima del costo total se debe dejar el texto alineado y $ 42 es el texto alineado a la derecha
Bootstrap v4 presenta la compatibilidad con flexbox
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
Obtenga más información en https://v4-alpha.getbootstrap.com/utilities/flexbox/
En lugar de usar la clase pull-right
, es mejor usar la clase text-right
en la columna, porque pull-right
ocasiona problemas a veces al redimensionar la página.
Podemos lograrlo con Bootstrap 4 Flexbox:
<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>
d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%
Ejemplo: JSFiddle
En Bootstrap 4, la respuesta correcta es usar la clase text-xs-right
.
Esto funciona porque xs
denota el tamaño de ventana más pequeño en BS. Si lo desea, puede aplicar la alineación solo cuando la vista sea mediana o más grande usando text-md-right
.
En el último alfa, text-xs-right
se ha simplificado a text-right
.
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
Actualización 2018 ...
Bootstrap 4.0.0
-
pull-right
ahora esfloat-right
-
text-right
es lo mismo que 3.x, y funciona para elementos en línea - tanto
float-*
comotext-*
son responsive para diferentes alineaciones en diferentes anchos (es decir:float-sm-right
)
Los utilitarios de flexbox (p. Ej .: justify justify-content-between
) también se pueden usar para la alineación:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
o, márgenes automáticos (p. ej .: ml-auto
) en cualquier contenedor de flexbox (fila, barra de navegación, tarjeta, 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
Usa 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 puede usar la clase text-right
como esta:
<div class="row">
<div class="col-md-6">Total cost</div>
<div class="col-md-6 text-right">$42</div>
</div>
<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 simplemente bien