¿Cómo centrar los botones en Twitter Bootstrap 3?

Estoy creando un formulario en Twitter Bootstrap pero tengo problemas para centrar el botón debajo de la entrada en el formulario. Ya he intentado aplicar elcenter-block clase al botón, pero eso no funcionó. ¿Cómo debo arreglar esto?

Aquí está mi 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>

Envuelva el botón en div con la clase "centro de texto".

Solo cambia esto:

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

A esto:

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

Editar

A partir de BootstrapV4 , center-blockse dejó caer # 19102 a favor dem-*-auto

De acuerdo con la documentación de 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>

Toda la clase center-block es decirle al elemento que tenga un margen de 0 automático, siendo el automático los márgenes izquierdo / derecho. Sin embargo, a menos que la clase text-center o css text-align: center; se establece en el elemento primario, el elemento no conoce el punto desde el que se puede calcular este cálculo automático, por lo que no se centrará como se esperaba.

Vea un ejemplo del código anterior aquí: 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>

agregar a su estilo:

pantalla: mesa; margen: 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>

Puede hacerlo dando margen o posicionando esos elementos absolutamente.

Por ejemplo

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

0px será de arriba a abajo y automático será de izquierda y derecha.

Intenté el siguiente código y funcionó para mí.

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

El control del botón está en un div y el uso de la clase de bootstrap de bloque central me ayudó a alinear el botón con el centro del div.

Verifique el enlace donde encontrará la clase de bloque central

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

usar text-align: centerpropiedad css

Actualización para Bootstrap 4:

Envuelva el botón con un conjunto div con las clases de utilidad 'd-flex' y 'justify-content-center' para aprovechar 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>

La ventaja de usar flexbox es poder agregar elementos / botones adicionales en el mismo eje, pero con su propia alineación separada. También abre la posibilidad de alineación vertical con las clases 'align-items-start / center / end'.

Puede envolver la etiqueta y el botón con otro div para mantenerlos alineados entre sí.

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

Puedes hacer lo siguiente. También evita la superposición de botones.

<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 mí tratar de hacer un independiente y <div>luego ponerlo buttonen eso. así como así:

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

Luego vaya a su CSSpágina de Estilo y haga lo Text-align:centersiguiente:

#contactBtn{text-align: center;}

Para Bootstrap 3

dividimos el espacio con las columnas, utilizamos 8 columnas pequeñas (col-xs-8), dejamos 4 columnas vacías (col-xs-offset-4) y aplicamos la propiedad (bloque 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 Bootstrap 4

Usamos Espaciado, Bootstrap incluye una amplia gama de clases de utilidad de margen de respuesta abreviadas y acolchadas para modificar la apariencia de un elemento. Las clases se nombran utilizando el formato {propiedad} {lados} - {tamaño} para xs y {propiedad} {lados} - {punto de interrupción} - {tamaño} para sm, md, lg y xl.

Más información aquí: 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>

Tuve este problema solía

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

En mi div que contiene algunas líneas h3, un par de líneas h4 y un botón Bootstrap. Todo, además del botón, saltó al centro después de usar el centro de texto, así que entré en mi hoja de CSS anulando Bootstrap y le di al botón un

margin: auto;

que parece haber resuelto el problema

o puede dar desplazamientos específicos para colocar el botón donde desee simplemente con el sistema de cuadrícula bootstrap,

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

de esta manera, también le permite especificar el tamaño del botón si establece btn-block. claro, esto solo funcionará en el rango de tamaño md, si desea establecer otros tamaños también, use xs, sm, lg.