Como centralizar botões no Twitter Bootstrap 3?

Estou criando um formulário no Twitter Bootstrap, mas estou tendo problemas para centralizar o botão abaixo da entrada no formulário. Eu já tentei aplicar a center-blockclasse ao botão, mas isso não funcionou. Como devo corrigir isso?

Aqui está o meu código.

<!-- Button -->
<div class="form-group">
    <label class="col-md-4 control-label" for="singlebutton"></label>
    <div class="col-md-4">
        <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
            Next Step!
        </button>
    </div>
</div>

Coloque o botão em div com a classe "text-center".

Apenas mude isso:

<!-- wrong -->
<div class="col-md-4 center-block">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">Next Step!</button>
</div>

Para isso:

<!-- correct -->
<div class="col-md-4 text-center"> 
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">Next Step!</button> 
</div>

Editar

A partir do BootstrapV4 , center-blockcaiu o número 19102 em favor dem-*-auto

De acordo com a documentação do Twitter Bootstrap: http://getbootstrap.com/css/#helper-classes-center

<!-- Button -->
<div class="form-group">
   <label class="col-md-4 control-label" for="singlebutton"></label>
   <div class="col-md-4 center-block">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary center-block">
          Next Step!
       </button>
   </div>  
</div>

Tudo o que a classe center-blockfaz é dizer ao elemento que tenha uma margem de 0 automático, sendo as margens esquerda / direita automática. No entanto, a menos que a classe text-center ou css text-align: center; é definido no pai, o elemento não sabe o ponto para calcular esse cálculo automático, portanto não se centra como previsto.

Veja um exemplo do código acima aqui: https://jsfiddle.net/Seany84/2j9pxt1z/

<div class="row">
  <div class="col-sm-12">
    <div class="text-center">
      <button class="btn btn-primary" id="singlebutton"> Next Step!</button>
    </div>
  </div>
</div>

adicione ao seu estilo:

display: mesa; margem: 0 automático;

<div class="container-fluid">
   <div class="col-sm-12 text-center">
       <button class="btn btn-primary" title="Submit"></button>
       <button class="btn btn-warning" title="Cancel"></button>
   </div>
</div>

Você pode fazer isso dando margem ou posicionando esses elementos absolutamente.

Por exemplo

.button{
  margin:0px auto; //it will center them 
}

0px será da parte superior e inferior e o automático será da esquerda e direita.

Eu tentei o código a seguir e funcionou para mim.

<button class="btn btn-default center-block" type="submit">Button</button>

O controle de botão está em uma div e o uso da classe de bloco de inicialização do bloco de inicialização me ajudou a alinhar o botão ao centro da div

Verifique o link onde você encontrará a classe do bloco central

http://getbootstrap.com/css/#helper-classes-center

usar text-align: centerpropriedade css

Atualização para o Bootstrap 4:

Enrole o botão com um conjunto de divs com as classes de utilitário 'd-flex' e 'justify-content-center' para aproveitar o flexbox.

<!-- Button -->
<div class="form-group">
  <div class="d-flex justify-content-center">
    <button id="singlebutton" name="singlebutton" class="btn btn-primary">
      Next Step!
    </button>
  </div>
</div>

A vantagem de usar o flexbox é poder adicionar elementos / botões adicionais no mesmo eixo, mas com seu próprio alinhamento separado. Também abre a possibilidade de alinhamento vertical com as classes 'align-items-start / center / end'.

Você pode envolver o rótulo e o botão com outra div para mantê-los alinhados um com o outro.

por exemplo, https://codepen.io/anon/pen/BJoeRY?editors=1000

Você pode fazer o seguinte. Também evita a sobreposição de botões.

<div class="center-block" style="max-width:400px">
  <a href="#" class="btn btn-success">Accept</a>
  <a href="#" class="btn btn-danger"> Reject</a>
</div>

Funciona para mim tentar fazer um independente e <div>depois colocar buttonnisso. bem assim :

<div id="contactBtn">
            <button type="submit" class="btn btn-primary ">Send</button>
</div>

Então vá para a sua CSSpágina Style e faça o Text-align:centerseguinte:

#contactBtn{text-align: center;}

Para o Bootstrap 3

dividimos o espaço com as colunas, usamos 8 pequenas colunas (col-xs-8), deixamos 4 colunas vazias (col-xs-offset-4) e aplicamos a propriedade (bloco central)

<!--Footer-->
<div class="modal-footer">
  <div class="col-xs-8 col-xs-offset-4 center-block">
    <button type="submit" class="btn btn-primary">Enviar</button>
    <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
    </div>
</div>

Para o Bootstrap 4

Usamos o espaçamento, o Bootstrap inclui uma ampla variedade de classes de utilitário de margem de resposta abreviada e acolchoada para modificar a aparência de um elemento. As classes são nomeadas usando o formato {propriedade} {lados} - {tamanho} para xs e {propriedade} {lados} - {ponto de interrupção} - {tamanho} para sm, md, lg e xl.

mais informações aqui: https://getbootstrap.com/docs/4.1/utilities/spacing/

<!--Footer-->
<div class="modal-footer">
  <button type="submit" class="btn btn-primary ml-auto">Enviar</button>
  <button type="button" class="btn btn-danger mr-auto" data-dismiss="modal">Cerrar</button>
</div>

Eu tive esse problema. eu usei

<div class = "col-xs-8 text-center">

No meu div, contendo algumas linhas h3, algumas linhas h4 e um botão Bootstrap. Tudo, além do botão, saltou para o centro depois que eu usei o centro de texto, então entrei na minha folha de CSS substituindo o Bootstrap e dei um botão ao

margin: auto;

o que parece ter resolvido o problema.

ou você pode fornecer deslocamentos específicos para posicionar o botão onde desejar, simplesmente com o sistema de grade de autoinicialização,

<div class="col-md-offset-4 col-md-2 col-md-offset-5">
<input type="submit" class="btn btn-block" value="submit"/>

Dessa forma, também é possível especificar o tamanho do botão se você definir o bloco btn. Certamente, isso funcionará apenas na faixa de tamanho md; se você quiser definir outros tamanhos também, use xs, sm, lg.