Bootstrap 4, comment aligner un bouton au centre?

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8">
      <div v-for="job in job">
        <div class="text-center">
          <h1>{{ job.job_title }}</h1>
          <p><strong>Google Inc. </strong> - {{ job.location }}</p>
          <h2><u>Job Description</u></h2>
        </div>
        <p v-html="desc"></p>
        <p class="text-center">Posted: {{ formatDate(job.date_created) }}</p>
        <button v-on:click="applyResume()" id="apply-btn" class="btn btn-primary">{{ buttonText }}</button>
      </div>
    </div>
    <div class="hidden-sm-down col-md-4"></div>
  </div>
</div>

Je ne sais pas comment centrer ce bouton. Dans BS 3, j'utiliserais simplement le bloc central mais ce n'est pas une option dans BS4. Aucun conseil?

Dans Bootstrap 4, il faut utiliser la text-centerclasse pour aligner les blocs en ligne .

REMARQUE: text-align:center;défini dans une classe personnalisée que vous appliquez à votre élément parent fonctionnera quelle que soit la version de Bootstrap que vous utilisez. Et c'est exactement ce qui .text-centers'applique.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <button class="btn btn-default">Centered button</button>
    </div>
  </div>
</div>

Si le contenu à centrer est block ou flex (non inline-), on peut utiliser flexbox pour le centrer:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="d-flex justify-content-center">
  <button class="btn btn-default">Centered button</button>
</div>

... qui s'applique display: flex; justify-content: centerau parent.

Remarque: ne pas utiliser à la .row.justify-content-centerplace de .d-flex.justify-content-center, car cela .rowapplique des marges négatives sur certains intervalles de réactivité, ce qui entraîne des barres de défilement horizontales inattendues (à moins qu'il ne s'agisse d' .rowun enfant direct de .container, qui applique un remplissage latéral pour contrer la marge négative, sur les intervalles de réactivité corrects). Si vous devez utiliser .row, pour une raison quelconque, remplacer sa marge et son remplissage par .m-0.p-0, auquel cas vous vous retrouvez avec à peu près les mêmes styles que .d-flex.

Remarque importante: La deuxième solution est problématique lorsque le contenu centré (le bouton) dépasse la largeur du parent ( .d-flex), en particulier lorsque le parent a une largeur de fenêtre, en particulier parce qu'il est impossible de faire défiler horizontalement jusqu'au début du contenu (gauche- plus).
Ne l'utilisez donc pas lorsque le contenu à centrer pourrait devenir plus large que la largeur du parent disponible et que tout le contenu devrait être accessible.

Essayez ceci avec bootstrap

CODE:

<div class="row justify-content-center">
  <button type="submit" class="btn btn-primary">btnText</button>
</div>

LIEN:

https://getbootstrap.com/docs/4.1/layout/grid/#variable-width-content

Voici le code HTML complet que j'utilise pour centrer par bouton dans le formulaire Bootsrap après la fermeture de form-group:

<div class="form-row text-center">
    <div class="col-12">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
 </div>

Avec l'utilisation des utilitaires bootstrap 4, vous pouvez centrer horizontalement un élément lui-même en définissant les marges horizontales sur «auto».

Pour définir les marges horizontales sur auto, vous pouvez utiliser mx-auto. Le mfait référence à la marge et le xfera référence à l'axe des x (gauche + droite) et autofera référence au paramètre. Cela définira donc la marge gauche et la marge droite sur le paramètre «auto». Les navigateurs calculeront la marge de manière égale et centreront l'élément. Le paramètre ne fonctionnera que sur les éléments de bloc, donc l'affichage: le bloc doit être ajouté et avec les utilitaires d'amorçage, cela se fait par d-block.

<button type="submit" class="btn btn-primary mx-auto d-block">Submit</button>

Vous pouvez considérer que tous les navigateurs prennent entièrement en charge les paramètres de marge automatique en fonction de cette réponse Prise en charge du navigateur pour la marge: auto il est donc sûr à utiliser.

La classe bootstrap 4 text-centerest également une très bonne solution, mais elle a besoin d'un élément wrapper parent. L'avantage de l'utilisation de la marge automatique est qu'elle peut être effectuée directement sur l'élément de bouton lui-même.

Utiliser la text-centerclasse dans le conteneur parent pour Bootstrap 4

Ce qui a fonctionné pour moi était (adaptez "css / style.css" à votre chemin css):

Head HTML:

 <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

HTML du corps:

 <div class="container">
  <div class="row">
    <div class="mycentered-text">
      <button class="btn btn-default"> Login </button>
    </div>
  </div>
</div>

Css:

.mycentered-text {
    text-align:center
}

pour un bouton dans une barre de navigation réduite, rien ci-dessus n'a fonctionné pour moi, donc dans mon fichier css, j'ai fait .....

.navbar button {
    margin:auto;
}

et cela a fonctionné !!

vous pouvez également simplement envelopper avec une classe H ou une classe P avec un attribut de centre de texte