Alignement de texte Responsive avec Bootstrap

J'ai évoqué pourquoi je n'utilisais pas Bootstrap. Cependant, l'un des pré-requis pour un nouveau projet est de l'utilisé aussi j'ai retroussé mes manches pour approfondir la philosophie et j'ai déjà commencé à me casser les dents !

Aligner un texte à gauche sur version mobile puis à droite sur version desktop est chose aisé en CSS avec les Media Queries. Gérer le fait que deux colonnes côte à côte sur version desktop passe l'une sous l'autre sur version mobile l'est également avec Bootstrap. Pourtant aligner un texte à gauche sur version mobile puis à droite sur version desktop aussi facilement que la gestion des colonnes n'est pas possible...

Je vais vous présenter un petit pan de code remédiant à cela.

Comment gérer des alignements différents en fonction de la taille ?

Philosophie des grilles

La philosophie utilisé pour gérer différemment les colonnes d'une grille avec Bootstrap en fonction de la taille du périphérique est de jouer avec les 4 préfixes suivant :

  • xs : défini un comportement à partir de la taille minimal d'un mobile jusqu'à l'infini en grande taille.
  • sm : défini un comportement à partir d'une taille type tablette jusqu'à l'infini en grande taille.
  • md : défini un comportement à partir d'une taille type desktop jusqu'à l'infini en grande taille.
  • lg : défini un comportement à partir d'une taille type grand desktop jusqu'à l'infini en grande taille.

Ainsi dans l'exemple ci-dessous notre élément va prendre 12 colonne sur version mobile puis 8 sur version tablette puis 6 sur version desktop et enfin 4 sur version grand desktop sur une base de 12 colonnes.

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">Contenu</div>
    </div>
</div>

Étendre la philosophie aux alignements de texte

Alors quel ne fut pas ma déception quand j'ai essayé de faire ceci en espérant aligner une image à gauche sur mobile et à droite sur plus grand écran :

<div class="container">
    <div class="row">
        <div class="text-left-xs text-right-md">Contenu</div>
    </div>
</div>

Le code ci-dessus ne marche pas. Afin de le rendre fonctionnel, il va falloir ajouter à votre Bootstrap ceci :

/* Comportement par défaut */,
.text-left-sm,
.text-left-md,
.text-left-lg,
.text-center-sm,
.text-center-md,
.text-center-lg,
.text-right-sm,
.text-right-md,
.text-right-lg,
.text-justify-sm,
.text-justify-md,
.text-justify-lg { 
    text-align: inherit; 
}

/* Style par défaut */
.text-left-xs { 
    text-align: left; 
}
.text-center-xs { 
    text-align: center; 
}
.text-right-xs { 
    text-align: right;
}
.text-justify-xs { 
    text-align: justify; 
}

/* Style pour tablette */
@media (min-width: 768px) {
    .text-left-sm, 
    .text-left-xs { 
        text-align: left; 
    }
    .text-center-sm, 
    .text-center-xs { 
        text-align: center; 
    }
    .text-right-sm, 
    .text-right-xs { 
        text-align: right; 
    }
    .text-justify-sm, 
    .text-justify-xs { 
        text-align: justify; 
    }
}

/* Style pour desktop */
@media (min-width: 992px) {
      .text-left-md, 
      .text-left-sm, 
      .text-left-xs { 
          text-align: left; 
      }
      .text-center-md, 
      .text-center-sm, 
      .text-center-xs { 
          text-align: center; 
      }
    .text-right-md, 
    .text-right-sm, 
    .text-right-xs { 
        text-align: right;
    }
    .text-justify-md, 
    .text-justify-sm, 
    .text-justify-xs { 
        text-align: justify;
    }
}

/* Style pour grand desktop */
@media (min-width: 1200px) {
    .text-left-lg, 
    .text-left-md, 
    .text-left-sm, 
    .text-left-xs {
        text-align: left;
    }
    .text-center-lg, 
    .text-center-md, 
    .text-center-sm, 
    .text-center-xs {
        text-align: center;
    }
    .text-right-lg, 
    .text-right-md, 
    .text-right-sm, 
    .text-right-xs {
        text-align: right;
    }
    .text-justify-lg, 
    .text-justify-md, 
    .text-justify-sm, 
    .text-justify-xs {
        text-align: justify;
    }
}

et le tour est joué.

Et pour le reste ?

J'imagine que ce n'est pas le seul cas de figure ou j'aurai besoin d'ajouter ce type de comportement. Donc si cela arrive avec d'autres propriétés existantes sans préfixe, suivez juste le même schéma.

Et vous ? Quelles sont vos surcharges utiles ?