Comment centrer les boutons dans Twitter Bootstrap 3?

260

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>
Sam Bates
la source

Réponses:

571

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

Shekhar Pankaj
la source
1
Fonctionne même avec Foundation)
divideByZero
35

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/

Seany84
la source
33
<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>
obe6
la source
C'est celui qui a fonctionné pour moi. J'ai essayé les autres ci-dessus et ça ne voulait pas centrer.
mjwrazor
Comment faire de même avec un inputélément?
InfZero
8

ajoutez à votre style:

affichage: table; marge: 0 auto;

Benjamin
la source
5
Je ne sais pas comment vous en êtes arrivé à cette conclusion.
Fergus
8
<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>
Alexandre Pereira
la source
2
Bien que ce code puisse répondre à la question, fournir un contexte supplémentaire concernant pourquoi et / ou comment ce code répond à la question améliore sa valeur à long terme.
Ajean
5

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.

user3443160
la source
5

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

Swapneel
la source
3

utiliser la text-align: centerpropriété css

rsudip90
la source
3

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

Chris
la source
1

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>
Rouillé
la source
1

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;}
Mohammad Heydari
la source
0

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>
Gonen09
la source
Bien que cet extrait de code puisse résoudre la question, l' inclusion d'une explication permet d'améliorer la qualité de votre réponse. N'oubliez pas que vous répondrez à la question pour les lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code.
Stefan Crain
0

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.

Ado Moshe
la source
-2

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.

Ugur
la source