Créer un container bootstrap amélioré

Écrit par
Temps de lecture : 5 minutes

Vous est-il déjà arrivé de vous demander comment fonctionnent les container de bootstrap ? Ou bien de devoir rajouter une <div> pour pouvoir mettre un background image ? Dans cet article on va voir comment est construit ce genre de container et comment peut-on les améliorer.

Un container, c’est quoi ?

Un container, c’est un élément qui permet d’englober plusieurs sous éléments afin de les centrer dans notre contenu. Dans l’idée, un container, peu importe la taille de l’écran fera la même taille, il sera simplement centré. Si c’est aussi souvent utilisé de nos jours, c’est parce que cela améliore grandement la lisibilité.

Les containers sont représentés par un élément HTML avec une classe :

HTML

Le nom de la classe importe peu, mais dans la plupart des framework la classe .container est utilisée. Voici une représentation de ce que cela pourrait donner dans une page web :

Représentation d'un container dans une page
Représentation d’un container dans une page

Maintenant que nous avons vu les besoins auxquels répondent ces containers, on va voir comment les construire.

Un container à la bootstrap !

Pour construire leurs containers, bootstrap utilise des marges intérieures et extérieures :

CSS

Voyons voir en détails ce code. En premier lieux on va donner une largeur fixe à notre container. Ensuite on ajoute du padding sur les côtés et enfin, on centre le container grâce aux margin: auto sur les côtés.

Et voilà, c’est terminé, merci d’avoir suivi ce tutoriel. Ah oui j’ai failli oublié, le responsive…

En effet pour le moment, notre container n’est absolument pas responsive ni générique. On va remédier à cela.

Créer un container responsive

En réalité, bootstrap ne défini pas une width fixe sur le container. Il lui applique une width: 100% et ajoute un max-width en fonction d’un breakpoint. Voilà ce qu’on obtiendrait :

CSS

Vous en conviendrez, rien qu’avec 2 breakpoints, ce n’est pas jolie. En réalité pour remédier à cela on peut utiliser Sass afin de créer un tableau avec nos breakpoints.

Sass à la rescousse

Je vais créer un tableau contenant tout les breakpoints que je souhaite utiliser pour mon container :

Sass

Bootstrap propose, par défaut, ce type de tableau. Je m’en suis donc inspiré pour créer celui-ci. On a donc en clés, les breakpoints en question, et en valeur, les tailles du container associées.

Ajoutons un peu de CSS à tout ça et voilà le résultat :

Sass

J’ai ajouté un box-sizing: border-box pour ne pas avoir de problèmes de calculs. J’ai également supprimé les padding, on verra pourquoi par la suite. Ensuite pour chaque ligne de notre tableau, j’applique une media query qui modifiera la taille maximale du container en fonction du breakpoint.

Tout semble fonctionnel, il suffit donc d’ajouter une entrée pour moduler le container. Il manque cependant un point, lorsqu’on est entre 0 et 576px, le contenu est collé aux bords. On a pas ce problème avant car la taille du container est toujours inférieur à celle de l’écran. Pour les petits écrans, il faudrait rajouter du padding.

Sass

Au lieu d’utiliser du padding directement, je vais plutôt enlever un peu d’espace à l’élément. Ainsi on a un container composé uniquement de margins, laissant donc le padding a disposition si besoin.

Pour ce faire, j’applique un max-width d’une valeur de 100% à laquelle je retranche une variable qui contiendrait notre padding. On multiplie cette valeur par 2 car on ajoute généralement le padding de chaque côté.

On pourrait par exemple définir cette variable à 5px ou bien .5rem. Voilà ce que donne finalement ce container :

Sass

Avec ces 16 lignes, on a un container totalement responsive et fonctionnel qui n’utilisent que des margin. Au début de l’article je vous ais dit que parfois nous aimerions avoir notre contenu centré mais avec une image ou couleur de fond. Actuellement en utilisant la plupart des framework, on doit utiliser une <div> avant notre container pour lui appliquer un background. On peut pallier à cela en utilisant que du padding.

Un container composé de padding

Afin de n’utiliser que du padding, on va reprendre le même concept que précédemment lorsqu’on a défini une règle spécifique pour le breakpoint mobile :

Sass

Comme pour le premier, on ajoute un box-sizing: border-box et un width: 100%. Ensuite, en considérant le même tableau de breakpoints, on boucle dessus de la même manière. Dans cette boucle on crée une media query avec le même if/else qui nous a permis de simuler un padding pour les petits écrans.

Ici, comme notre container doit être constitué de padding, on va directement les définir avec notre variable $container-gap. Pour gérer les autres breakpoints, on va retourner en cours de maths.

On va ajouter du padding sur les côtés, pour ça, on utilise comme base 50% (puisqu’on l’ajoute de chaque côté). À cette base, on lui retire la valeur du container divisée par 2. Pour mieux comprendre on va prendre un exemple.

Notre écran fait 1100px de large. Conformément à notre tableau, notre contenu fait 960px de large. Le calcul deviens alors le suivant : 50% - 960px / 2. On obtient donc 50% de la page soit 550px - 480px (960px / 2) ce qui nous donne 70px. Il y a donc un padding de 70px ajouté de chaque côté de notre contenu. Soit 70 * 2 = 140px de padding + le contenu de 960px. On retrouve bien nos 1100px de la taille de l’écran, et le contenu est centré.

Avec un peu de maths on a pu créer un container utilisant uniquement des padding. On va donc facilement pouvoir appliquer un background-image ou un background-color à ce container afin d’avoir un fond plein tout en conservant notre contenu centré. Ce dernier m’est très utile au quotidien et je ne peux plus m’en passer.

En résumé

On a créer 2 containers, l’un utilisant les margin et l’autre, les padding, chacun ayant son utilité. Ils permettent de ne pas créer de div inutiles entre eux tout en centrant leurs contenus. On a utilisé Sass afin d’écrire le moins de code possible pour tout créer dynamiquement. Grâce à lui on peut également modifier des variables afin de rajouter des breakpoints et changer le padding du contenu sur mobile de manière dynamique.

Code source

Pour finir je vous mets à disposition le code source final.

Sass

Si cet article vous a aidé et/ou appris de nouvelles choses, vous pouvez le partagez à d’autres développeurs à qui ça pourrait intéresser. Je vous remercie de m’avoir lu jusqu’ici. À vos containers !