L'organisation spatiale des pages web est l'une des premières préoccupations lorsque l'on crée un site web. Prévoit-on une bannière ? Faut-il un espace pour un menu à gauche ou en haut ? Y aura-t-il des blocs sur un des côtés pour recevoir certaines fonctionnalités comme la connexion ou des infos ? Le framework Bootstrap repose sur un système de grille, un élément essentiel et le cœur même de Bootstrap. On entend par système de grille une structure de colonnes et de lignes permettant d'organiser le contenu et la mise en forme de la page web.
Le conteneur : le socle de votre mise en page
Avant de pouvoir jouir du système de grille, il est primordial et requis de définir le conteneur. Les conteneurs sont les composants les plus basiques de Bootstrap. Ils permettent de structurer la grille. Vous partez de Bootstrap, le layout est la partie la plus haute, c'est-à-dire le conteneur le plus haut de votre page. En l'utilisant, vous acceptez les contraintes ; vous pouvez modifier ces contraintes de façon globale en redéfinissant quelques variables.
En utilisant la classe .container, on centre la grille sur une largeur maximale fixe, qui est variable suivant la largeur de la page. Tandis qu'en utilisant .container-fluid, on permet à la grille d'occuper 100 % de la largeur de la page. C'est de votre responsabilité de faire en sorte que les éléments enfants se comportent bien par rapport aux contraintes du grid. Sinon, n'utilisez pas le grid de Bootstrap. Chaque grille a une façon de s'utiliser, respectez-la : le <container> est le contexte de départ où commence la grille.
La structure en lignes et colonnes
Bootstrap 4 découpe le corps de la page web en une multitude de lignes, on parle alors de row. La première classe à connaître est row, qui représente une rangée. Il faut ensuite définir le nombre de colonnes pour chaque élément en sachant qu'il y en a au maximum douze. La classe row crée un groupe horizontal de colonnes. Les colonnes à l'intérieur d'une ligne sont définies à l'aide de la classe col.
Le système de grille de Bootstrap divise la page en 12 colonnes, offrant une structure de mise en page flexible et réactive. Pourquoi 12 colonnes ? Tout simplement car le nombre 12 est un nombre qui allie deux avantages : il n'est pas trop élevé et il permet de nombreuses possibilités. Grâce au nombre 12, vous pouvez diviser l'espace en deux (6 colonnes), en trois (4 colonnes), en quatre (3 colonnes), en six (2 colonnes) ou en douze (1 colonne). Bref, 12 est un nombre magique qui vous permet plein de combinaisons.
La logique des gouttières et des dimensions
Il s'agit de diviser votre page web en douze colonnes de largeur égale, séparées par un interstice appelé gouttière ou gutter en anglais. Cette gouttière est de largeur fixe, quelle que soit la largeur de l'écran. Dans Bootstrap, cette gouttière est générée par des padding à droite et à gauche de 15 pixels par défaut. Il y a donc 30 pixels de vide entre chaque colonne de la grille.
Si les gouttières sont de largeur fixe, la largeur des colonnes, elle, est calculée en pourcentage et est donc variable en fonction de la largeur de l'écran. L'idée, c'est de venir accrocher les éléments de la page aux colonnes de la grille. Par exemple, si vous désirez deux éléments de taille identique côte à côte, chaque élément aura une largeur de six colonnes.
Si vous posez la question : « La largeur d'une colonne comme md par exemple est de 81px, donc si je veux mettre un contenu de 100px soit je prends 2 colonnes, soit je dois adapter la colonne au contenu, mais est-ce que c'est faisable ? », la réponse réside dans la compréhension du CSS. Bootstrap est essentiellement un fichier CSS. Pour comprendre les grilles, il faut aller voir le code source CSS et bien comprendre CSS ! Une fois le concept de grille compris, la documentation Bootstrap ou tout autre système de grille est compréhensible.
Le Responsive Design et les points de rupture
En introduction, il était précisé que Bootstrap était responsive design. En effet, Bootstrap adapte la mise en forme de la page en fonction de la taille de l'écran. La grille de Bootstrap est particulièrement puissante et flexible tout en étant relativement simple à utiliser. Dans les coulisses, la grille de Bootstrap utilise le module Flex du CSS.
Bootstrap Navbar & Grid System Explained | col-md col-lg col-sm | Beginner Tutorial
Bootstrap 4 réagit suivant cinq formats. Pourquoi cinq sortes de classes pour les colonnes ? Parce que Bootstrap est « responsive », ce qui veut dire qu'il s'adapte à la taille de l'écran. Lors de l'empilage, les colonnes prennent toute la place disponible. La largeur des éléments de la grille est calculée en pourcentage selon la fenêtre de visualisation.
Si c'est pour du texte et que vous pensez que les longueurs de lignes sont trop importantes pour certains écrans, utilisez alors les Media-Queries pour jouer avec des colonnes pour le texte. Le responsive Bootstrap me semble être que des grilles fixes qui changent selon les breakpoints et pas des grilles fluides. Il est donc nécessaire de vérifier, pour une ligne, la somme des colonnes. Si vous mettez col-sm-12, cela veut dire qu'on aura une seule colonne à partir d'écrans de taille moyenne (768px). Ce qui n'a pas de sens, puisque sur mobile la largeur par défaut est d'une colonne.
Gestion avancée et bonnes pratiques
Il est possible de supprimer toutes ces marges en utilisant la classe no-gutters avec la classe row. De plus, pour gérer les flottants, vous pouvez facilement nettoyer les éléments en ajoutant .clearfix à l'élément parent, en utilisant le micro clearfix popularisé par Nicolas Gallagher.
Concernant le centrage, il suffit de centrer le contenu situé à l'intérieur du div Bootstrap ! Le centrage doit faire l'objet d'un article spécifique, car il dépend du contexte. Vous pouvez également approfondir vos connaissances sur les offsets (décalages) et les push/pull pour manipuler le positionnement des colonnes au sein de la ligne. Faites bien la différence entre offset et push au niveau du code CSS (notamment l'utilisation des marges).
Bootstrap est un framework très puissant, il donne la possibilité de créer des pages responsives ou non. Vous pouvez envisager deux hypothèses pour les éléments : soit ils se redimensionnent en restant positionnés, ou alors ils s'empilent quand la fenêtre devient plus étroite et se positionnent côte à côte quand elle s'élargit. Le découpage en colonnes est tout simplement une division en pourcentage de la largeur de la fenêtre de visualisation. En revanche, il n'en est pas vraiment de même pour les rangées. Puisque la largeur des colonnes est contrainte, le flux des données s'écoule verticalement, ce qui est un comportement HTML classique.
En maîtrisant la relation entre le conteneur, les rangées et les classes de colonnes, vous possédez les clés pour structurer n'importe quel projet web avec Bootstrap, tout en garantissant une expérience utilisateur optimale sur tous les supports.