Cómo alinear la derecha en Bootstrap

Al desarrollar cualquier aplicación, es esencial considerar la alineación y la posición adecuadas de los componentes. Este enfoque ayuda a los desarrolladores a hacer que la aplicación sea más profesional. La alineación se refiere a la disposición de los artículos. Más específicamente, en Bootstrap, se pueden usar varias clases para ajustar la alineación del elemento, como "derecho de texto","flotar derecho", y muchos más.

Este artículo le instruirá sobre cómo alinearse en Bootstrap.

Cómo alinear la derecha en Bootstrap?

Hay varias formas de alinear a la derecha los elementos en Bootstrap. Algunos de ellos se enumeran a continuación:

• • clase flotante
  • Justify-Content-End
  • alinearse
  • alineado
  • Ml-Auto
  • derecho de texto

Método 1: Cómo alinear la derecha en Bootstrap utilizando la clase "Float-Right"?

En Bootstrap, el "flotar derecho"La clase colocó el elemento en el lado derecho.

Ejemplo

En este ejemplo, usaremos el "flotar derecho"Clase en el elemento" ":

Usando la clase flotante-derecha

Producción

Método 2: Cómo alinear la derecha en Bootstrap utilizando la clase "Justify-Content-End"?

La clase de bootstrap "Justify-Content-End"Se usa con artículos flexibles. Entonces el "D-FLEX"La clase también se agrega al elemento" ":

Uso de Justify-Content-End

Producción

Método 3: Cómo alinear la derecha en Bootstrap utilizando la clase "Alinearse-Items-End"?

El "alinearse"Es la clase de utilidad del"ítems alineados". Estas clases se utilizan para ajustar las alineaciones de los elementos flexibles. Entonces, la clase D-Flex hace que la pantalla del elemento se flexione. Luego, dentro de este contenedor "", agregue dos elementos más:

Artículo 1

Producción

Método 4: Cómo alinear la derecha en Bootstrap utilizando la clase "Alineado-Self-End"?

El "alineadoLa clase se utiliza para establecer la alineación de los elementos individuales a la derecha.

Ejemplo

Entendamos con la ayuda del ejemplo declarado a continuación:

• • Agrega un ""Elemento y asignarlo el"D-FLEX" y "columna flexible"Clases.
  • Dentro del elemento "", especifique tres subcontainadores.
  • Asignar el "alineado"Clase al segundo elemento" ":

línea 1

Producción

Método 5: Cómo alinear la derecha en Bootstrap utilizando la clase "ML-Auto"?

El "Ml-Auto"La clase agrega espacio de margen a la izquierda del elemento. Para utilizarlo:

• • Especifica el ""Elemento con la clase" D-FLEX ".
  • Luego, cree un botón usando el "btn","BTN-Outline-Primary", y "Ml-Auto"Clases:

botón ML-Auto

Producción

Método 6: Cómo alinear la derecha en Bootstrap utilizando la clase "Texto-Right"?

El "derecho de textoLa clase alinea el texto en el lado derecho. En el siguiente ejemplo, agregue un "

"Elemento y asignarlo"derecho de texto" clase:

Este texto está correcto alineado.

Producción

Eso se trataba de establecer la alineación correcta en Bootstrap.

Conclusión

Se utilizan múltiples clases en Bootstrap para establecer la alineación de texto correcta, como "flotar derecho","Justify-Content-End","alinearse","alineado","Ml-Auto", y "derecho de texto". Sin embargo, algunas clases funcionan en los elementos con la pantalla "doblar". Esta publicación ha ilustrado cómo alinearse correctamente en Bootstrap utilizando múltiples métodos.