Saltar al contenido

Alinear a la izquierda y alinear a la derecha dentro de div en Bootstrap

El paso a paso o código que verás en este artículo es la solución más rápida y efectiva que encontramos a esta duda o problema.

Solución:

Actualización 2021…

Bootstrap 5 (beta)

Para alinear dentro de un flexbox div o row

  • ml-auto es ahora ms-auto
  • mr-auto es ahora me-auto

Arranque 4+

  • pull-right es ahora float-right
  • text-right es lo mismo que 3.x y funciona para elementos en línea
  • ambas cosas float-* y text-* responden a diferentes alineaciones en diferentes anchos (es decir: float-sm-right)

Las utilidades de flexbox (por ejemplo:justify-content-between) también se puede utilizar para la alineación:

left
right

o, márgenes automáticos (por ejemplo:ml-auto) en cualquier contenedor flexbox (fila, barra de navegación, tarjeta, d-flex, etc…)

left
right

Demostración de alineación de Bootstrap 4
Bootstrap 4 Ejemplos de alineación derecha (float, flexbox, text-right, etc.)


Arranque 3

Utilizar el pull-right clase..

Total cost
$42

Demostración de Bootstrap 3

También puede utilizar el text-right clase como esta:

  
Total cost
$42

Bootstrap 3 Demostración 2

En lugar de usar pull-right clase, es mejor usar text-right clase en la columna, porque pull-right crea problemas a veces al cambiar el tamaño de la página.

En Bootstrap 4 la respuesta correcta es usar el text-xs-right clase.

Esto funciona porque xs denota el tamaño de ventana más pequeño en BS. Si quisiera, podría aplicar la alineación solo cuando la ventana gráfica sea mediana o más grande usando text-md-right.

En el último alfa, text-xs-right se ha simplificado a text-right.

Total cost
$42

Valoraciones y comentarios

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *