Comment centrer le texte sur les petits écrans avec Bootstrap ?

Lucas D. - July 19, 2024

Problème : Centrage du texte sur les petits écrans

Le centrage du texte sur les petits écrans peut être difficile avec Bootstrap. La mise en page par défaut peut ne pas aligner le texte comme vous le souhaitez, en particulier sur les appareils mobiles. Cela peut rendre votre interface utilisateur moins attrayante et potentiellement dérouter les utilisateurs.

Solution : Mise en œuvre de l'alignement de texte réactif dans Bootstrap

Utilisation des classes d'alignement de texte de Bootstrap

Bootstrap propose des utilitaires d'alignement de texte qui permettent de contrôler l'alignement du texte sur différentes tailles d'écran. Ces classes utilisent les mêmes points de rupture de largeur de viewport que le système de grille.

Pour utiliser ces classes, appliquez-les à l'élément contenant votre texte. Le format est text-{breakpoint}-{alignment}, où {breakpoint} est la taille d'écran (xs, sm, md, lg, xl) et {alignment} est left, center, ou right.

Exemple: Raccourci pour l'alignement de texte réactif

Rappelez-vous qu'il n'est pas nécessaire de spécifier l'alignement pour chaque point de rupture. Bootstrap applique l'alignement au point de rupture spécifié et à tous les écrans plus grands jusqu'à ce qu'une autre classe le remplace. Par exemple, text-md-center centre le texte sur les écrans moyens et plus grands, sauf si une classe pour les écrans plus grands (comme text-lg-left) est également appliquée.

Étapes pour centrer le texte du pied de page

Pour centrer le texte du pied de page sur les petits écrans tout en conservant l'alignement à gauche et à droite sur les écrans plus grands, suivez ces étapes :

Modifiez la structure HTML : Conservez la structure actuelle, mais ajoutez de nouvelles classes aux éléments <div> contenant le texte.
Ajoutez des classes d'alignement aux colonnes : Pour la colonne de gauche, utilisez text-xs-center text-sm-left. Pour la colonne de droite, utilisez text-xs-center text-sm-right.
Alignez sur toutes les tailles d'écran : Le HTML modifié devrait ressembler à ceci :

   <footer>
   <div class="container">
       <div class="row">
           <div class="col-xs-12 col-sm-6 text-xs-center text-sm-left">
               <p>
                   &copy; 2015 exemple.com. Tous droits réservés.
               </p>
           </div>
           <div class="col-xs-12 col-sm-6 text-xs-center text-sm-right">
               <p>
                   <a href="#"><i class="fa fa-facebook"></i></a> 
                   <a href="#"><i class="fa fa-twitter"></i></a> 
                   <a href="#"><i class="fa fa-google-plus"></i></a>
               </p>
           </div>
       </div>
   </div>
   </footer>

Cette modification centre le texte sur les très petits écrans (xs) et conserve l'alignement original à gauche et à droite sur les petits écrans (sm) et au-dessus.

Approches alternatives pour le centrage du texte

Requêtes média CSS personnalisées

Vous pouvez utiliser des requêtes média CSS personnalisées pour contrôler l'alignement du texte sur différentes tailles d'écran. Cette approche implique d'écrire des règles CSS qui ciblent des points de rupture spécifiques.

Voici un exemple de mise en œuvre de requêtes média CSS personnalisées :

@media (max-width: 575px) {
    .footer-text {
        text-align: center;
    }
}

@media (min-width: 576px) {
    .footer-left {
        text-align: let;
    }
    .footer-right {
        text-align: right;
    }
}

Avantages de l'utilisation du CSS personnalisé :

Plus de contrôle sur les points de rupture spécifiques
Peut cibler les éléments avec plus de précision

Inconvénients de l'utilisation du CSS personnalisé :

Nécessite plus de maintenance
Peut entrer en conflit avec les classes intégrées de Bootstrap
Augmente la taille du fichier CSS

Exemple: Personnalisation des points de rupture

Vous pouvez affiner vos requêtes média en utilisant des points de rupture personnalisés qui correspondent à vos besoins de conception. Par exemple :

@media (min-width: 768px) and (max-width: 991px) {
    .footer-text {
        font-size: 14px;
    }
}

Cela vous permet d'appliquer des styles spécifiques pour les écrans de taille moyenne.

Solution basée sur Flexbox

Flexbox offre un moyen de centrer le texte et d'autres contenus. Vous pouvez utiliser Flexbox avec le système de grille de Bootstrap pour une solution d'alignement flexible.

Pour mettre en œuvre une approche de centrage basée sur Flexbox :

Ajoutez une classe de conteneur Flexbox à votre ligne :

<div class="row d-flex">

Utilisez les classes utilitaires Flexbox sur vos colonnes :

<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-start">
    <!-- Contenu de la colonne de gauche -->
</div>
<div class="col-xs-12 col-sm-6 d-flex justify-content-center justify-content-sm-end">
    <!-- Contenu de la colonne de droite -->
</div>

Cette solution centre le contenu sur les écrans très petits et l'aligne à gauche ou à droite sur les écrans petits et supérieurs.

Lorsque vous utilisez Flexbox avec le système de grille de Bootstrap, gardez à l'esprit que :

Les propriétés Flexbox peuvent affecter la disposition des colonnes de la grille
Certains navigateurs plus anciens peuvent ne pas prendre entièrement en charge Flexbox
Les mises en page Flexbox complexes peuvent être plus difficiles à maintenir

Les solutions CSS personnalisées et Flexbox offrent des alternatives aux classes d'alignement de texte intégrées de Bootstrap, permettant un contrôle plus spécifique de votre mise en page.