logo oujood
🔍

Les conteneurs(container) Bootstrap 5

OUJOOD.COM

Conteneurs de Bootstrap 5

Vous avez appris dans le chapitre précédent que Bootstrap nécessite un élément conteneur pour envelopper le contenu du site.
Les conteneurs sont utilisés pour envelopper le contenu qu'ils contiennent, et il existe deux classes de conteneurs :
La classe .container fournit un conteneur réactif à largeur fixe.
La classe .container-fluid fournit un conteneur pleine largeur, s'étendant sur toute la largeur de la fenêtre d'affichage.

Conteneur de largeur fixe

Pour créer un conteneur réactif de largeur fixe, utilisez la classe .container.
Notez que sa largeur (max-width) changera en fonction de la taille de l'écran :

max-width
Très petit< 576px 100%
petit ≥ 576px 540px
Moyen ≥ 768px 720px
Large ≥ 992px 960px
Extra Large ≥ 1200px 1140px
XXL ≥ 1400px 1320px

Exécutez l'exemple ci-dessous et redimensionnez la fenêtre du navigateur pour voir que la largeur du conteneur change à différents points de rupture :

Code

📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Exemple container</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>Ma première page Bootstrap</h1>
  <p>Cette partie se trouve à l'intérieur d'une classe .container.</p>
  <p>La classe .container fournit un conteneur réactif à largeur fixe.</p> 
<p>Redimensionnez la fenêtre du navigateur pour voir que la largeur du conteneur changera à différents points d'arrêt.</p>
</div>

</body>
</html>

Remarque : Le point de rupture XXL (≥1400px) est nouveau dans Bootstrap 5, alors que le plus grand point de rupture dans Bootstrap 4 est Extra large (≥1200px).

Conteneur fluide

Pour créer un conteneur pleine largeur qui s'étendra sur toute la largeur de l'écran (la largeur est toujours de 100 %), utilisez la classe .container-fluid :

Code

📋 Copier le code 

<!DOCTYPE html>
<html lang="fr">
<head>
  <title>Bootstrap Exemple container-fluid</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  
<div class="container">
  <h1>Ma première page Bootstrap</h1>
  <p>Cette partie se trouve à l'intérieur d'une classe .container-fluid.</p>
  <p>La classe .container-fluid fournit un conteneur pleine largeur, s'étendant sur toute la largeur de la fenêtre d'affichage.</p>
</div>

</body>
</html>

Rembourrage des conteneurs (Padding)

Par défaut, les conteneurs ont un padding à gauche et à droite, mais pas de padding en haut ou en bas. C'est pourquoi nous utilisons souvent des utilitaires d'espacement, tels qu'un padding et des margins supplémentaires, pour les rendre encore plus attrayants. Par exemple, .pt-5 signifie "ajouter un grand padding en haut" :
Exemple :

<div class="container pt-5"> </div>

Bordure et couleur des conteneurs

D'autres fonctionnalités, telles que les bordures et les couleurs, sont également souvent utilisées avec les conteneurs voici ci après un exemple :

Code

📋 Copier le code 

<!-- la classe border donne une bordure à l'élément -->
<div class="container p-5 my-5 border"></div>
<!-- la classe bg-dark donne une couleur noir à l'arriére plant de l'élément -->
<div class="container p-5 my-5 bg-dark text-white"></div>
<!-- la classe text-white donne une couleur blanche au texte de l'élément -->
<div class="container p-5 my-5 bg-primary text-white"></div>

Note : Vous apprendrez beaucoup plus sur les couleurs et les fonctionnalités des bordures dans un chapitre ultérieur.

Conteneurs responsives

Vous pouvez également utiliser les classes .container-sm|md|lg|xl pour définir à quel moment le conteneur doit être responsive. La largeur maximale du conteneur changera en fonction de la taille de l'écran du périphérique d'affichage :

La classe Très petit < 576 px petit ≥ 576 px Moyen ≥ 768 px Large ≥ 992 px Extra Large ≥ 1200 px XXL ≥ 1400 px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100% 100%1320px

Ci après un exemple :

Code

📋 Copier le code 

<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
cours precedent Cours precedent    Sommaire     Cours suivant cours suivant