Como se alinhar à direita no bootstrap

Ao desenvolver qualquer aplicativo, é essencial considerar o alinhamento e a posição adequados dos componentes. Esta abordagem ajuda os desenvolvedores a tornar o aplicativo mais profissional. O alinhamento refere -se ao arranjo de itens. Mais especificamente, no bootstrap, várias classes podem ser usadas para ajustar o alinhamento do elemento, como “Text-right","direito de flutuação", e muitos mais.

Este artigo o instruirá sobre como se alinhar corretamente no bootstrap.

Como se alinhar à direita no bootstrap?

Existem várias maneiras de itens de alinhamento direito no bootstrap. Alguns deles estão listados abaixo:

• • Classe de flutuação
  • justificar o conteúdo do conteúdo
  • alinhe-itens-final
  • alinhado-end-end
  • ML-AUTO
  • Text-right

Método 1: Como alinhar-se ao botão no bootstrap usando a classe "Float-Right"?

Em bootstrap, o “direito de flutuação”Classe posicionou o elemento no lado direito.

Exemplo

Neste exemplo, usaremos o “direito de flutuação”Classe no elemento“ ”

Usando aula de flutuação

Saída

Método 2: Como alinhar-se no botão de bootstrap usando a classe "justify-content-end"?

A classe de bootstrap “justificar o conteúdo do conteúdo”É usado com itens flexíveis. Então o "D-Flex”A classe também é adicionada ao elemento“ ”

usando justify-content-end

Saída

Método 3: Como alinhar-se ao botão em bootstrap usando a classe “alinhamento-itens-final”?

O "alinhe-itens-final”É a classe de utilidade do“alinhado-itens”. Essas classes são usadas para ajustar os alinhamentos dos itens flexíveis. Então, a classe D-Flex faz com que a tela do elemento flexione. Então, dentro deste contêiner "", adicione mais dois elementos:

Item 1

Saída

Método 4: Como alinhar-se à direita no bootstrap usando a classe "alinhada-end-end"?

O "alinhado-end-end”A classe é utilizada para definir o alinhamento dos itens únicos à direita.

Exemplo

Vamos entender com a ajuda do exemplo abaixo do ponto:

• • Adicione um “”Elemento e atribui o“D-Flex" e "coluna flexível" Aulas.
  • Dentro do elemento "", especifique três subcontaiadores.
  • Atribua o “alinhado-end-end”Classe para o segundo elemento“ ”

linha 1

Saída

Método 5: Como alinhar-se ao botão em bootstrap usando a classe "ML-AUTO"?

O "ML-AUTO”A classe adiciona espaço de margem à esquerda do elemento. Para utilizá -lo:

• • Especifique o "”Elemento com a classe“ D-Flex ”.
  • Em seguida, crie um botão usando o “btn","Btn-Outline-Primary", e "ML-AUTO" Aulas:

Botão ML-AUTO

Saída

Método 6: Como alinhar-se à direita no bootstrap usando a classe "Text-Right"?

O "Text-right”A classe alinha o texto no lado direito. No exemplo abaixo, adicione um “

”Elemento e atribui um“Text-right" aula:

Este texto está certo alinhado.

Saída

Isso se tratava de definir o alinhamento certo no bootstrap.

Conclusão

Várias classes no bootstrap são utilizadas para definir o alinhamento certo de texto, como “direito de flutuação","justificar o conteúdo do conteúdo","alinhe-itens-final","alinhado-end-end","ML-AUTO", e "Text-right”. No entanto, algumas classes funcionam nos elementos com exibição “flex”. Este post ilustrou como se alinhar corretamente no bootstrap usando vários métodos.