Blog d'un passionné du web (Symfony2, HTML5, Sass, Gulp…)

Mon site freelance
Mon Facebook - Mon Twitter

Gestion des colonnes … les méconnues de Bootstrap 3

Connaissez vous les classes pull et push de Bootstrap 3 ? Ces classes sont peu utilisés et pourtant bien utiles voir indispensables … J’ai en effet déjà vu des bricolages franchement laid ou bien des design pas franchement adaptées aux mobiles.

A quoi servent ces classes pull – push ?

Prenons l’exemple d’un design en 2 colonnes avec à gauche une image et à droite un texte que l’on inverse de coté une ligne sur 2 … classique.

design-bootstrap-colonnes

Pour cela on pourrait faire :


<div class="col-md-6"><img src="Mon-image-gauche" alt="" /></div>
<div class="col-md-6">Mon texte à droite</div>
 
<div class="col-md-6">Mon texte à gauche</div>
<div class="col-md-6"><img src="Mon-image-droite" alt="" /></di>

Oui mais sur mobile cela donne quoi ?

design-bootstrap-colonnes-mobile

Pas terrible n’est-ce pas ?  (bon encore que dans mon illustration ça va encore mais avec un texte un peu plus long et 4 lignes on ne comprend plus rien)
C’est là que les classe pull et push de Bootstrap interviennent !

Design responsive et mise en place ce classes pull et push !

Reprenons l’exemple ci-dessus. Pour la partie « grand écran » on ne change rien. Par contre pour les mobiles on aimerait bien alterner image et texte.

design-bootstrap-colonnes-mobile-push-pull

C’est là que nos classes interviennent, elles permettent de garder l’alternance mais de déplacer les colonnes à gauche ou à droite :


<div class="col-md-6"><img src="Mon-image-gauche" alt="" /></div>
<div class="col-md-6">Mon texte à droite</div>
 
<div class="col-md-6 col-md-push-6"><img src="Mon-image-droite" alt="" /></di>
<div class="col-md-6 col-md-pull-6">Mon texte à gauche</div>
 

 

Si vous utiliser un CMS ou un langage dynamique pour générer vos pages vous pouvez rajouter ces classes un ligne sur deux (index paire/impaire) dans votre boucle.

Si vous avez des remarques n’hésitez pas !

1 juillet 2016


Previous Post

Next Post