Cómo alinear el texto izquierdo y derecho dentro de un div en bootstrap

La disposición de los elementos de la aplicación se conoce como alineación. Ayuda a crear un diseño ordenado y los mantiene alejados de ser un desastre desordenado. Bootstrap proporciona muchas clases predefinidas que se utilizan para este propósito. Estas clases incluyen "pesaje","derrota","flotador izquierdo", y muchos más.

Este artículo explicará cómo establecer la alineación del texto derecha e izquierda dentro de un "" en Bootstrap.

Cómo alinear el texto de la derecha e izquierda dentro de un DIV usando bootstrap?

Se utilizan varias formas para ajustar la alineación del texto dentro de un

envase. Sin embargo, discutiremos lo siguiente:

• Método 1: Establezca la alineación izquierda y derecha usando "pesaje" y "derrota" Clase
• Método 2: configure la alineación derecha e izquierda utilizando el "flotar derecho" y "flotador izquierdo"Clases
• Método 3: Alineación izquierda y derecha utilizando el "Justify-contento entre" Clase

Método 1: configure el texto de alineación izquierda y derecha usando la clase "Pull-Left" y "Pull-Right"

En Bootstrap 3, el "derrota" y "pesajeLas clases se utilizan para establecer la alineación del texto en los lados derecho e izquierdo, respectivamente.

El siguiente ejemplo muestra la demostración práctica de las clases discutidas anteriormente:

Primero, agregue un "" con el "Clearfix" y "BG-Info"Clases.

Dentro del contenedor creado, agregue dos más ""Etiquetas sosteniendo algo de contenido. A la primera se asigna la clase "Pull-Left", y al otro se le asigna la clase "Pull-Right".

Html

Costo
$ 30

Aquí:

• "ClearfixLa clase se utiliza para borrar contenido flotado. Sin él, el diseño se rompería.
• "pesajeLa clase alinea el texto en el lado izquierdo.
• "derrotaLa clase alinea el texto en el lado derecho.

Se puede observar que el texto "Costo"Está alineado, mientras que el valor del dólar relevante está alineado a la derecha:

Método 2: configure el texto de alinear derecha e izquierda utilizando las clases "Float-Right" y "Float-Left"

En Bootstrap 4, el "flotador izquierdo" y "flotar derechoLas clases se utilizan para alinear los elementos de izquierda a derecha. Para utilizarlos, primero:

• Agregue un elemento "" y asignarlo "BG-WARNING" y "Clearfix"Clases.
• Dentro de esto, agregue dos elementos más "" que contienen texto.
• Especifica el "flotador izquierdo"Clase al primer contenedor que flotará el texto a la izquierda.
• Asignar el "flotar derecho"Al" "que flotará el texto a la derecha.

Aquí está el código HTML:

Puntuaciones
500

Producción

Método 3: El texto de alineación izquierda y derecha utilizando la clase "Justify-Content-between"

En Bootstrap 4, el "Justify-contento entreLa clase distribuye el mismo espacio entre los elementos flexibles.

El siguiente ejemplo muestra una clase "" que tiene "BG-Info","D-FLEX", y "Justify-contento entre"Clases:

Coste total
$ 50

Producción

Usando estas clases de bootstrap, el texto dentro del contenedor "" es correcto e alineado con la izquierda.

Consejo de bonificación
Si desea alinear todos los elementos flexibles a la izquierda, use el bootstrap "Justify-Content-start"Clase, y si los elementos flexibles deben estar alineados correctamente, use el"Justify-Content-End" clase.

Conclusión

A la derecha e izquierda alinear el texto dentro de un elemento "", se utilizan varias clases. En Bootstrap 3, el "pesaje" y "derrotaSe utilizan clases. En Bootstrap 4, el "flotador izquierdo" y "flotar derecho"Las clases se pueden usar. Los elementos flexibles se alinean utilizando el "Justify-contento entre" clase. Esta publicación ha explicado cómo establecer la alineación de texto izquierda y derecha dentro de un contenedor "" en Bootstrap.