Centro de Bootstrap

A estrutura de bootstrap é uma ferramenta poderosa para projetar sites. Oferece muitas aulas com estilos predefinidos. Mais especificamente, no bootstrap, o texto pode ser justificado usando o “Justify de texto"Classe, e para alinhar os elementos na direita, esquerda e centro,"Text-right","Text-esquerda", e "Centro de texto”As aulas são utilizadas. Os itens flexíveis também podem ser alinhados à esquerda, direita ou central usando as classes específicas.

Este artigo irá guiá-lo:

• Como centralizar o texto horizontalmente usando o bootstrap?
• Como centralizar uma coluna horizontalmente usando o bootstrap?
• Como centralizar uma imagem horizontalmente usando o bootstrap?

Como centralizar o texto horizontalmente usando o bootstrap?

No bootstrap, o texto pode ser justificado usando o “Text-esquerda","Text-right", e "Centro de texto" Aulas. O "Centro de texto”A classe é mais comumente usada para centralizar os elementos horizontalmente.

Exemplo

O exemplo abaixo mostra como centralizar o texto horizontalmente usando o bootstrap:

• Adicione um “”Elemento e atribui a classe como“Centro de texto”.
• Dentro desta classe, adicione o “

  ”Elemento para especificar algum conteúdo de texto.

Html

Bem -vindo ao Linuxhint!

Pode -se observar que o texto tem agora alinhamento horizontal do centro:

Como centralizar uma coluna horizontalmente usando o bootstrap?

A grade no bootstrap compreende linhas e colunas. O "linha”Classe cria uma linha e a“col”Define a coluna.

Exemplo

Para demonstração prática, confira o exemplo mencionado abaixo:

• Adicione um “"Elemento e atribui-lhe uma classe" Linha "," D-Flex "e" Justify-Content-Center ".
• ““D-Flex”Faz a tela do elemento flexionar.
• ““justificar-content-center”O centro horizontalmente alinha os elementos.
• ““Col-4”A classe é utilizada para ajustar a coluna:

coluna centrada

Saída

Como centralizar uma imagem horizontalmente usando o bootstrap?

O elemento da imagem pode ser alinhado no centro usando o “D-Flex" e "justificar-content-center”.

Exemplo

Este exemplo centra a imagem seguindo as etapas:

• Primeiro, adicione um “”Elemento e atribui o“D-Flex" e "justificar-content-center" Aulas.
• Dentro do recipiente criado, adicione outro “"Com a classe"cartão”.
• Dentro do contêiner "cartão", especifique o "corpo-corpo" como o nome da classe.
• Inclua o “”Tag para adicionar uma imagem com o“src","alt", e "largura”Atributos para especificar a fonte da imagem adicionada, texto alternativo e a largura padrão.

Html

Saída

É tudo sobre como centralizar horizontalmente os elementos no bootstrap.

Conclusão

Para centralizar os elementos horizontalmente, principalmente o “Centro de texto”A classe é usada. Os elementos podem ser flexíveis usando o “D-Flex" aula. Os itens flexíveis podem ser alinhados no centro usando o “justificar-content-center" aula. Este post explicou os métodos para alinhar vários elementos horizontalmente.