Como centralizar botão bootstrap?

centralizar botão bootstrap

Existem várias maneiras de fazer isso com tags HTML ou elementos do bootstrap, veja abaixo.

Na div ou outro elemento superior use a classe text-align.

exemplo simples:

<div class="text-center">
      <button type="button" >botão centralizado text-center</button>
</div>



Pode ser usada também a classe text-center junto com a classe .btn referente aos botões do bootstrap. Isso pode ser usado para usar a classe de botão junto com o formato de um botão.

exemplo simples:


<div class="text-center">
      <a href="#" class="btn btn-primary">botão classe text-center</a>
</div>



Também pode ser usado a tag HTML <center> no lugar do elemento com a classe.

<center>
      <a href="#" class="btn btn-primary">botão tag center</a>
</center>


botão tag center


Outra opção é usar a classe .d-flex.


<div class="d-flex justify-content-center btn btn-primary">botão flex justify center</div>


botão flex justify center


Pode ser usado também aling="center" do HTML.

Outra maneira de fazer com o bootstrap é usando as grids.

Como usar grids do bootstrap?

Veja mais:
Como centralizar imagem no bootstrap?
Como usar flexbox ou flexutilities do bootstrap?
Como alinhar botão com HTML?
Como alinhar botão com CSS?
Como alinhar div bootstrap no centro?
Como alinhar o botão ao lado direito da caixa de texto no Bootstrap?
Como faço para centralizar um botão em uma div?
Como mover um botão com CSS?

Como faço para alinhar uma imagem em HTML?
Como centralizar um botão no CSS?

Quer acompanhar as novidade do site?

Leia mais em: etbootstrap.com/

Como centralizar botão bootstrap?

Última atualização: 2023-02-15