Bootstrap 4, Comment centrer un bouton ?

Question

          {{ job.job_title }}
          Google Inc.  - {{ job.location }}
          Job Description

        Posté le : {{ formatDate(job.date_created) }}
        {{ buttonText }}

Je n'arrive pas à trouver comment centrer ce bouton. Dans BS 3, j'utiliserais juste center-block mais ce n'est pas une option dans BS4. Des conseils ?

Answer 1

En Bootstrap 4, on devrait utiliser la classe text-center pour aligner les inline-blocks.

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

      Bouton centré

---

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

  Bouton centré

... ce qui applique display: flex; justify-content: center au parent.

Note: ne pas utiliser .row.justify-content-center au lieu de .d-flex.justify-content-center, car .row applique des marges négatives sur certains intervalles de résponsivité, ce qui entraîne des barres de défilement horizontales inattendues (à moins que .row soit un enfant direct de .container, qui applique un padding latéral pour contrer la marge négative, sur les bons intervalles de résponsivité). Si vous devez utiliser .row, pour une raison quelconque, annulez sa marge et son padding avec .m-0.p-0, auquel cas vous vous retrouvez avec à peu près les mêmes styles que .d-flex.

Note importante: La deuxième solution pose problème lorsque le contenu centré (le bouton) dépasse la largeur du parent (.d-flex), en particulier lorsque le parent a une largeur de la fenêtre d'affichage, car cela rend impossible le défilement horizontal vers le début du contenu (le plus à gauche).
Donc ne l'utilisez pas lorsque le contenu à centrer peut devenir plus large que la largeur disponible du parent et que tout le contenu doit être accessible.

Answer 2

Essayez ceci avec bootstrap

CODE:

  btnText

LIEN:

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

Answer 3

Avec l'utilisation des utilitaires 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 m fait référence à la marge et le x fera référence à l'axe des x (gauche + droite) et auto fera référence au paramètre. Ainsi, cela définira 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 en bloc doit être ajouté et avec les utilitaires Bootstrap, cela se fait avec d-block.

Soumettre

Vous pouvez considérer que tous les navigateurs prennent en charge pleinement les paramètres de marges automatiques selon cette réponse Prise en charge par les navigateurs pour margin: auto, il est donc sûr de l'utiliser.

La classe Bootstrap 4 text-center est également une très bonne solution, cependant elle nécessite un élément parent conteneur. L'avantage de l'utilisation de la marge automatique est qu'elle peut être directement appliquée à l'élément du bouton lui-même.

Answer 4

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

        Soumettre

Answer 5

Utilisez la classe text-center dans le conteneur parent pour Bootstrap 4