133 votes

Bootstrap 4, Comment centrer l'alignement d'un bouton ?

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

Je n'arrive pas à trouver comment centrer ce bouton. Dans BS 3, j'aurais simplement utilisé le bloc central, mais ce n'est pas une option dans BS4. Un conseil ?

273voto

Andrei Gheorghiu Points 3898

Dans Bootstrap 4, vous devez utiliser l'option text-center pour aligner les blocs inline.

NOTE : text-align:center; définie 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 que .text-center s'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>

0 votes

C'est pas grave, j'ai juste été stupide et j'ai mis row à l'intérieur de col plutôt que col à l'intérieur de row.

44voto

abo-jwad22 Ahmd Points 51

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

1 votes

Rien d'autre n'a fonctionné, même en donnant manuellement les styles à l'objet. Mais ceci fonctionne. Acceptez cette réponse.

1 votes

Seule cette solution fonctionne, je ne sais pas pourquoi, mais c'est la vérité.

41voto

Bob Siefkes Points 413

Grâce aux utilitaires de bootstrap 4, vous pouvez centrer horizontalement un élément en définissant les marges horizontales sur "auto".

Pour définir les marges horizontales sur auto, vous pouvez utiliser mx-auto . Le site m fait référence à la marge et à la x se réfèrera à l'axe des x (gauche+droite) et auto fait référence au paramètre. Ainsi, la marge gauche et la marge droite seront réglées 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 type bloc. Il faut donc ajouter l'élément display:block et, avec les utilitaires de bootstrap, cela se fait de la manière suivante d-block .

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

Vous pouvez considérer que tous les navigateurs supportent pleinement les paramètres de marge automatique selon cette réponse. Prise en charge de margin : auto par les navigateurs donc il est sûr à utiliser.

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

2 votes

Cela a fonctionné pour moi en utilisant le modèle d'administration Core UI Pro basé sur Bootstrap 4.

32voto

Jaskaran Singh Points 312

Voici le HTML complet que j'utilise pour centrer un bouton dans un formulaire Bootsrap après la fermeture du groupe de formulaires :

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

3 votes

Réponse parfaite. Merci.

14voto

Serginho Points 520

Utilisez text-center dans le conteneur parent pour Bootstrap 4

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X