Como alinhar a esquerda e a direita no texto dentro de uma div em bootstrap

O arranjo dos elementos do aplicativo é referido como alinhamento. Ajuda a criar um design interessante e os mantém longe de ser uma bagunça desordenada. Bootstrap fornece muitas classes predefinidas que são utilizadas para esse fim. Essas classes incluem “Pull-esquerda","atração direta","Float-esquerda", e muitos mais.

Este artigo explicará como definir o alinhamento direito e esquerdo do texto em um "" em bootstrap.

Como alinhar a direita e a esquerda em um Div usando o bootstrap?

Várias maneiras são utilizadas para ajustar o alinhamento do texto dentro de um

recipiente. No entanto, discutiremos o seguinte:

• Método 1: Defina o alinhamento esquerdo e direito usando “Pull-esquerda" e "atração direta" Aula
• Método 2: Defina o alinhamento direito e esquerdo usando o “direito de flutuação" e "Float-esquerda" Aulas
• Método 3: Alinhamento esquerdo e direito usando o “Justify-Content-between" Aula

Método 1: Defina o texto alinhado esquerdo e direito usando a classe "Pull-Left" e "Pull-Right"

No bootstrap 3, o “atração direta" e "Pull-esquerda”As aulas são utilizadas para definir o alinhamento do texto nos lados direito e esquerdo, respectivamente.

O exemplo abaixo mostra a demonstração prática das classes discutidas acima:

Primeiro, adicione um “" com o "Clearfix" e "BG-Info" Aulas.

Dentro do recipiente criado, adicione mais dois “”Tags segurando algum conteúdo. O primeiro recebe a classe "Pull-left", e o outro recebe a classe "Pull-Right".

Html

Custo
$ 30

Aqui:

• ““Clearfix”A classe é utilizada para limpar conteúdo flutuado. Sem ele, o layout seria quebrado.
• ““Pull-esquerda”A classe alinha o texto no lado esquerdo.
• ““atração direta”A classe alinha o texto no lado direito.

Pode -se observar que o texto “Custo”Fica alinhado, enquanto o valor do dólar relevante está alinhado:

Método 2: Defina o texto alinhado direito e esquerdo usando as classes "Float-Right" e "Float-Left"

Em Bootstrap 4, o “Float-esquerda" e "direito de flutuação”As aulas são utilizadas para alinhar os elementos esquerdos e para a direita. Para utilizá -los, iremos primeiro:

• Adicione um elemento “” e atribua -o “BG-caules" e "Clearfix" Aulas.
• Dentro disso, adicione mais dois "" elementos contendo texto.
• Especifique o "Float-esquerda”Class.
• Atribua o “direito de flutuação”Para o“ ”que flutuará o texto à direita.

Aqui está o código HTML:

Pontuações
500

Saída

Método 3: Texto alinhado à esquerda e direita usando a classe "justify-content-between"

Em Bootstrap 4, o “Justify-Content-between”Classe distribui espaço igual entre os elementos flexíveis.

O exemplo abaixo mostra uma classe "" tendo "BG-Info","D-Flex", e "Justify-Content-between" Aulas:

Custo total
$ 50

Saída

Usando essas classes de bootstrap, o texto dentro do contêiner é direito e alinhado à esquerda.

Dica de bônus
Se você deseja alinhar todos os itens flexíveis à esquerda, use o bootstrap “Justify-Content-Start”Classe, e se os itens flexíveis precisarem estar alinhados, use o“justificar o conteúdo do conteúdo" aula.

Conclusão

Para o texto alinhado da direita e esquerda dentro de um elemento "", várias classes são utilizadas. No bootstrap 3, o “Pull-esquerda" e "atração direta”As aulas são utilizadas. Em Bootstrap 4, o “Float-esquerda" e "direito de flutuação”As aulas podem ser usadas. Os elementos flexíveis são alinhados utilizando o “Justify-Content-between" aula. Este post explicou como definir o alinhamento esquerdo e direito do texto em um contêiner "" em bootstrap.