Maîtriser les Breakpoints sur Bootstrap 5

les Breakpoints sur Bootstrap 5

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.

Table des matieres
Bootstrap 5 maitriser les breakpoints

Résolution d’écrans 1200 px :

Bootstrap 5 maitriser les breakpoints

Résolution d’écrans 576 px :

Bootstrap 5 maitriser les breakpoints

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.

Les différents Breakpoints proposés par Bootstrap 5

Taille d’écran égale ou supérieur à 768 px :

Bootstrap 5 maitriser les breakpoints

Taille d’écran inférieure à 768 px :

Bootstrap 5 maitriser les breakpoints

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.

Bootstrap 5 Comment changer la taille d’une colonne à partir d’une certaine résolution ?
Bootstrap 5 Comment changer la taille d’une colonne à partir d’une certaine résolution ?

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

Bootstrap 5 Comment changer la taille d’une colonne à partir d’une certaine résolution ?
Bootstrap 5 Comment changer la taille d’une colonne à partir d’une certaine résolution ?

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

Les différents Breakpoints proposés par Bootstrap 5

A partir de 768px :

Les différents Breakpoints proposés par Bootstrap 5

En dessous de 768px :

Les différents Breakpoints proposés par Bootstrap 5

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
Bootstrap 5 Utiliser plusieurs Breakpoint pour une même colonne

A partir de 992px :

  • Colonne 1 : espace 1 colonne.
  • Colonne 2 : espace 10 colonnes.
  • Colonne 3 : espace 1 colonne.
Bootstrap 5 Utiliser plusieurs Breakpoint pour une même colonne

De 768px jusqu’ à 991px :

  • Colonne 1 : espace 2 colonnes.
  • Colonne 2 : espace 8 colonnes.
  • Colonne 3 : espace 2 colonnes.
Les différents Breakpoints proposés par Bootstrap 5

De 576px jusqu’ à 767px :

  • Colonne 1 : espace 3 colonnes.
  • Colonne 2 : espace 6 colonnes.
  • Colonne 3 : espace 3 colonnes.
Bootstrap 5 Utiliser plusieurs Breakpoint pour une même colonne

En dessous de 576px :

  • Colonne 1 : espace 4 colonnes.
  • Colonne 2 : espace 4 colonnes.
  • Colonne 3 : espace 4 colonnes.
Les différents Breakpoints proposés par Bootstrap 5
Nous serions ravis de connaître votre avis

Laisser un commentaire

error: Content is protected !!
 
BOOGLIT
Logo
Enable registration in settings - general
Compare items
  • Total (0)
Compare
0