Comment centrer les boutons dans Twitter Bootstrap 3?

Je crée un formulaire dans Twitter Bootstrap, mais j'ai des problèmes avec le centrage du bouton sous l'entrée du formulaire. J'ai déjà essayé d'appliquer la center-blockclasse au bouton mais cela n'a pas fonctionné. Comment dois-je résoudre ce problème?

Voici mon code.

<!-- 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>

Enveloppez le bouton dans div avec la classe "text-center".

Changez juste ceci:

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

Pour ça:

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

Éditer

À partir de BootstrapV4 , a center-blockété abandonné # 19102 en faveur dem-*-auto

Selon la documentation 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>

Tout ce que fait la classe, center-blockc'est de dire à l'élément d'avoir une marge de 0 auto, l'automobile étant les marges gauche / droite. Cependant, à moins que la classe text-center ou css text-align: center; est défini sur le parent, l'élément ne connaît pas le point de départ de ce calcul automatique et ne se centre donc pas comme prévu.

Voir un exemple du code ci-dessus ici: 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>

ajoutez à votre style:

affichage: table; marge: 0 auto;

<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>

Vous pouvez le faire en donnant une marge ou en positionnant absolument ces éléments.

Par exemple

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

0px sera de haut en bas et auto sera de gauche et de droite.

J'ai essayé le code suivant et cela a fonctionné pour moi.

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

Le contrôle du bouton est dans un div et l'utilisation de la classe de bootstrap du bloc central m'a aidé à aligner le bouton au centre de div

Vérifiez le lien où vous trouverez la classe du bloc central

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

utiliser la text-align: centerpropriété css

Mise à jour pour Bootstrap 4:

Enveloppez le bouton avec un ensemble de div avec les classes utilitaires «d-flex» et «justification-centre de contenu» pour tirer parti de 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>

L'avantage d'utiliser flexbox est de pouvoir ajouter des éléments / boutons supplémentaires sur le même axe, mais avec leur propre alignement séparé. Cela ouvre également la possibilité d'un alignement vertical avec les classes 'align-items-start / center / end'.

Vous pouvez envelopper l'étiquette et le bouton avec un autre div pour les garder alignés les uns avec les autres.

par exemple https://codepen.io/anon/pen/BJoeRY?editors=1000

Vous pouvez effectuer les opérations suivantes. Cela évite également le chevauchement des boutons.

<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>

Cela fonctionne pour moi, essayez de faire un indépendant <div>puis mettez-le buttondedans. juste comme ça :

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

Accédez ensuite à votre CSSpage Style et procédez Text-align:centercomme suit:

#contactBtn{text-align: center;}

Pour Bootstrap 3

on divise l'espace avec les colonnes, on utilise 8 petites colonnes (col-xs-8), on laisse 4 colonnes vides (col-xs-offset-4) et on applique la propriété (center-block)

<!--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>

Pour Bootstrap 4

Nous utilisons Espacement, Bootstrap comprend une large gamme de classes utilitaires de marge de réponse abrégées et rembourrées pour modifier l'apparence d'un élément. Les classes sont nommées en utilisant le format {propriété} {côtés} - {taille} pour xs et {propriété} {côtés} - {point d'arrêt} - {taille} pour sm, md, lg et xl.

plus d'informations ici: 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>

J'ai eu ce problème. j'ai utilisé

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

Sur mon div contenant quelques lignes h3, quelques lignes h4 et un bouton Bootstrap. Tout à part le bouton a sauté au centre après avoir utilisé text-center, donc je suis allé dans ma feuille CSS en remplaçant Bootstrap et j'ai donné au bouton un

margin: auto;

ce qui semble avoir résolu le problème.

ou vous pouvez donner des décalages spécifiques pour faire la position du bouton où vous voulez simplement avec le système de grille de bootstrap,

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

De cette façon, vous pouvez également spécifier la taille du bouton si vous définissez btn-block. bien sûr, cela ne fonctionnera que dans la plage de taille md, si vous souhaitez également définir d'autres tailles, utilisez xs, sm, lg.