Les Breakpoints de Bootstrap 5 vont vous permettre de changer le design de votre site selon la résolution (taille) d’écran sur lequel il est consulté.
Nous avons vu dans leçon précédente que Bootstrap gère la taille des éléments en fonction de la taille de l’écran.
Nous avons vu dans leçon précédente que Bootstrap gère la taille des éléments en fonction de la taille de l’écran.
Résolution d’écrans 1200 px :
Résolution d’écrans 576 px :
Comme on peut le voir, les colonnes se sont rétrécies, mais demeurent disposer de la même manière et occupent toujours la même largeur (pourcentage) sur l’écran.
Mais comment faire si nous souhaitons que les éléments de notre site soient disposés différemment en fonction de la taille d’écran ?
Nous allons utiliser les Breakpoints (points de transition).
Qu’est-ce que les Breakpoints ou points de transition de Bootstrap 5 ?
Les Breakpoints sont des points de transition correspondant à certaines résolutions (taille) écrans à partir desquels le positionnement des éléments sur une page va changer, en HTML / CSS ont les appelle cela les médias queries.
Comme vous le savez, le moteur de recherche de Google accorde de plus en plus d’importance à la version mobile d’un site, il est donc très important d’avoir un site qui s’adapte parfaitement à la taille d’écran sur lequel il est consulté.
En d’autres termes il ne lui suffit plus d’être responsive (fluide) pour ne pas être pénalisé par Google, il lui faut aussi proposer une disposition des éléments optimisée pour la consultation sur les écrans de taille réduite comme les smartphones ou tablettes.
Le système des Breakpoints de Bootstrap 5 est si performant et facile à maîtriser que c’est souvent la raison principale pour laquelle les développeurs Web utilisent ce Framework.
Les différents Breakpoints proposés par Bootstrap 5
Bootstrap 5 propose 6 Breakpoints différents pour combler tout le spectre des tailles d’écrans disponibles.
Pour mettre en place ces points de transition, nous allons utiliser les classes suivantes:
.col < 576px (classe par défaut, elle laisse Bootstrap 5 gérer la mise en page.)
<576px signifie que les changements de position des éléments ne surviendront que sur les tailles d’écrans inférieures à 576 px.
.col-sm >= 576px (sm pour small)
Les changements de mise en page de la colonne auront lieu sur toutes les résolutions supérieures ou égale à 576px.
.col-md >= 768px (md pour medium)
Les changements de mise en page de la colonne auront lieu sur toutes les résolutions supérieures ou égale à 768px.
.col-lg >= 992px (lg pour écran large)
Les changements de mise en page de la colonne auront lieu sur toutes les résolutions supérieures ou égale à 992px.
.col-xl >= 1200px (xl pour grand écran)
Les changements de mise en page de la colonne auront lieu sur toutes les résolutions supérieures ou égale à 1200px.
.col-xxl >= 1400px (xxl pour très grand écran)
Les changements de mise en page de la colonne auront lieu sur toutes les résolutions supérieures ou égale à 1400px.
Bien maintenant, prenons un premier exemple tout simple, nous voulons qu’en dessous de 768px le positionnement par défaut ne s’applique plus, c’est-à-dire que les colonnes ne se positionnent plus à côté les unes des autres.
Nous allons rajouter à nos colonnes la classe .md.
Taille d’écran égale ou supérieur à 768 px :
Taille d’écran inférieure à 768 px :
Comment changer la taille d’une colonne à partir d’une certaine résolution ?
On l’a vu dans la dernière leçon, sauf spécification contraire, Bootstrap va placer par défaut des colonnes de largeur égales sur toute la rangée.
Comme la grille comprend 12 colonnes, si nous créons 3 colonnes elles auront toutes une largeur de 4 colonnes. 12 : 3 = 4.
Si nous voulons que la colonne 2 occupe 8 colonnes nous le spécifions en rajoutant a la classe .col le nombre de colonnes que l’on veut utiliser pour telle ou telle colonne.
.col-8 = occupation de 8 colonnes
La colonne 2 occupe 8 un espace de 8 colonnes tandis que les deux autres occupent l’espace restant.
- 12-8 = 4.
- 4 : 2 = 2
La colonne 1 et la colonne 3 occupent un espace de 2 colonnes chacune.
Bien maintenant, imaginons que nous souhaitons que la colonne du milieu (colonne 2) occupe un espace de 8 colonnes uniquement sur les résolutions égales ou supérieures à 768px .
Nous allons rajouter a la classe .col le Breakpoint –md qui correspond a une taille de 768px ou plus.
.col-md-8
A partir de 768px :
En dessous de 768px :
Le fait de rajouter un Breakpoint –md à la classe .col de la deuxième colonne a pour conséquence d’ôter l’alignement par défaut de Bootstrap en dessous de cette résolution et place les colonnes les unes en dessous des autres une fois sous les 768px.
Pour éviter cela, on peut soit utiliser un Breakpoint plus petit soit utiliser plusieurs Breakpoints pour une même colonne.
Utiliser plusieurs Breakpoint pour une même colonne
Il est possible d’utiliser plusieurs Breakpoints sur une même colonne.
Imaginons que nous souhaitons que notre colonne 2 occupe :
- 10 colonnes sur un résolutions supérieure ou égale à 992px (-lg)
- 8 colonnes sur une résolution supérieure ou égale à 768px (-md)
- 6 colonnes sur une résolution supérieure ou égale à 576px (-sm)
- 4 colonnes sur une résolution inférieure à 576px ()
C’est très simple, il suffit de rajouter tous les breakpoints correspondants.
<div class= »col-lg-10 col-md-8 col-sm-6 col-4 bg-info text-light »>
<h3> colonne 2 </h3>
</div>
- col-lg-10 >= 992px
- col-md-8 >= 768px
- col-sm-6 >= 576px
- col-4 < 576px
A partir de 992px :
- Colonne 1 : espace 1 colonne.
- Colonne 2 : espace 10 colonnes.
- Colonne 3 : espace 1 colonne.
De 768px jusqu’ à 991px :
- Colonne 1 : espace 2 colonnes.
- Colonne 2 : espace 8 colonnes.
- Colonne 3 : espace 2 colonnes.
De 576px jusqu’ à 767px :
- Colonne 1 : espace 3 colonnes.
- Colonne 2 : espace 6 colonnes.
- Colonne 3 : espace 3 colonnes.
En dessous de 576px :
- Colonne 1 : espace 4 colonnes.
- Colonne 2 : espace 4 colonnes.
- Colonne 3 : espace 4 colonnes.
