web-dev-qa-db-fra.com

Comment centrer les boutons dans Twitter Bootstrap 3?

Je construis un formulaire dans Twitter Bootstrap, mais je ne parviens pas à centrer le bouton sous l'entrée dans le formulaire. J'ai déjà essayé d'appliquer la classe center-block 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>
htmlcsstwitter-bootstrapbutton
225
Sam Bates

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

Il suffit de changer 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>

Modifier

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

506
Shekhar Pankaj

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

Tout ce que la classe center-block fait, c'est d'indiquer à l'élément d'avoir une marge de 0 auto, l'auto étant la marge 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 calculer 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/

32
Seany84
<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>
29
obe6
<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>
8
Alexandre Pereira

ajouter à votre style:

display: table; margin: 0 auto;

5
benjamin

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

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

Le bouton de commande est dans une div et l’utilisation de la classe de bootstrap de center-block m’a aidé à aligner

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

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

5
Swapneel

Vous pouvez le faire en donnant une marge ou en positionnant ces éléments de manière absolue.

Par exemple

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

0px sera du haut et du bas et auto sera de gauche et à droite.

3
user3443160

Mise à jour pour Bootstrap 4:

Enveloppez le bouton avec un ensemble de div avec les classes d’utilitaires «d-flex» et «Just-Content-Center» 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 une autre div pour les maintenir alignés.

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

2
Chris

utiliser la propriété text-align: center css

2
rsudip90

Cela fonctionne pour moi Essayer de créer un <div> indépendant puis mettez la button dans cela . Comme ceci: 

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

Ensuite, allez à votre page CSSStyle et faites le Text-align:center comme ceci:

#contactBtn{text-align: center;}
1
Mohi72

Vous pouvez faire ce qui suit. 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>
1
Rusty

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 d’amorçage . Tout, à part le bouton, a sauté au centre après avoir utilisé text-center;

margin: auto;

qui semble avoir résolu le problème.

C’est ma première contribution ici et j’espère que cela aidera!

0
Ado Moshe

Pour Bootstrap 3

nous divisons l'espace avec les colonnes, nous utilisons 8 petites colonnes (col-xs-8), nous laissons 4 colonnes vides (col-xs-offset-4) et nous appliquons 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 Spacing, Bootstrap inclut un large éventail de classes d’utilitaires de marge de réponse abrégées et complétées pour modifier l’apparence d’un élément . Les classes sont nommées au format {propriété} {faces} - {taille} pour xs et {propriété } {côtés} - {point d'arrêt} - {taille} pour sm, md, lg et xl.

plus d'infos 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>
0
Gonen09