html - derecha - ¿Cómo centrar los botones en Twitter Bootstrap 3?
centrar div bootstrap (14)
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 la clase de center-block al botón, pero 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>
Actualización para Bootstrap 4:
Envuelva el botón con un conjunto de 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'', también.
Puedes 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
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-block se eliminó #19102 a favor de m-*-auto
Funciona para mí, intenta hacer un <div> independiente <div> luego coloca el button en eso. así como esto:
<div id="contactBtn">
<button type="submit" class="btn btn-primary ">Send</button>
</div>
Luego ve a tu página de estilo CSS y realiza la Text-align:center así:
#contactBtn{text-align: center;}
Para Bootstrap 3
dividimos el espacio con las columnas, usamos 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 Spacing, 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 usando 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>
Probé 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 bloque central de bootstrap me ayudó a alinear el botón con el centro del div
Revisa el enlace donde encontrarás la clase de bloque central.
Puedes hacer lo siguiente. También evita que los botones se superpongan.
<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>
Puedes hacerlo dando margen o colocando esos elementos absolutamente.
Por ejemplo
.button{
margin:0px auto; //it will center them
}
0px será desde la parte superior e inferior y automático será desde la izquierda y la derecha.
Según 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>
Todo lo que hace el center-block clase es decirle al elemento que tenga un margen de 0 automático, el auto es el margen 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 sabe el punto desde el cual se debe calcular este cálculo automático, por lo que no se centrará como se anticipó.
Vea un ejemplo del código anterior aquí: https://jsfiddle.net/Seany84/2j9pxt1z/
Tuve este problema solía
<div class = "col-xs-8 text-center">
En mi div contiene algunas líneas h3, un par de líneas h4 y un botón de arranque. Todo, además del botón, saltó al centro después de usar Text-center, así que entré en mi hoja de css y reemplazé el botón.
margin: auto;
Lo que parece haber resuelto el problema.
Esta es mi primera contribución aquí y espero que ayude!
o puede dar compensaciones específicas para hacer la posición del botón en el lugar que 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. seguro, esto solo funcionará en el rango de tamaño md, si también desea configurar otros tamaños, use xs, sm, lg.
use text-align: center css property
añadir a tu estilo:
pantalla: tabla; margen: 0 auto;
<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>
<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>