Container

Composant de mise en page servant à centrer et contraindre la largeur du contenu. Tous les containers partagent les mêmes paddings et le centrage horizontal via margin-inline: auto. La différence entre les variantes réside uniquement dans la valeur de max-width.

Stable Sans JS

Aperçu

LIVE PREVIEW — CONTAINERS

.container — max-width: 1280px

.container-fluid — 100%

.container-xs

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

Structure HTML

CODE HTML

👉 Largeur maximale

Tous les containers ont width: 100% — ils occupent toute la largeur disponible jusqu'à atteindre leur max-width. En dessous de cette valeur, ils restent fluides. Le centrage est assuré par margin-inline: auto.

Classes CSS

CLASSE	MAX-WIDTH	DESCRIPTION
`.container`	`1280px`	Container par défaut. Largeur maximale fixe à 1280px, centré horizontalement.
`.container-fluid`	`100%`	Container pleine largeur. Aucune contrainte de `max-width` — s'étend sur toute la largeur disponible.
`.container-xs`	`breakpoint xs`	Largeur maximale calée sur la valeur du breakpoint `xs` défini dans `$breakpoints`.
`.container-sm`	`breakpoint sm`	Largeur maximale calée sur la valeur du breakpoint `sm`.
`.container-md`	`breakpoint md`	Largeur maximale calée sur la valeur du breakpoint `md`.
`.container-lg`	`breakpoint lg`	Largeur maximale calée sur la valeur du breakpoint `lg`.
`.container-xl`	`breakpoint xl`	Largeur maximale calée sur la valeur du breakpoint `xl`.
`.container-xxl`	`breakpoint xxl`	Largeur maximale calée sur la valeur du breakpoint `xxl`.

Variantes

Container par défaut

Largeur maximale fixe à 1280px, centré automatiquement.

.container HTML

Container fluide

Occupe toujours 100% de la largeur disponible, sans contrainte de max-width.

.container-fluid HTML

Containers responsive

Les classes .container-{bp} sont générées automatiquement depuis la map $breakpoints. La max-width correspond exactement à la valeur du breakpoint associé.

.container-{bp} HTML

CSS Custom Properties

TOKEN	RÔLE
`--container-padding-x`	Padding horizontal appliqué à tous les containers.
`--container-padding-y`	Padding vertical appliqué à tous les containers.
`--container-max-width`	La largeur maximale appliquée au conteneur de base

EXEMPLE DE PERSONNALISATION CSS


                    /* Global variables */

                    :root {

                      --container-padding-x: 1.5rem;

                      --container-padding-y: 0;

                      --container-max-width: 1200px;

                    }

Notes & bonnes pratiques

✅ À faire

Utiliser .container comme wrapper de page par défaut. Réserver .container-fluid aux sections qui doivent s'étendre sur toute la largeur (hero, bannière, footer pleine largeur).

✅ À faire

Choisir .container-{bp} quand la largeur maximale du contenu doit correspondre à un breakpoint existant du projet — cela garantit la cohérence avec la grille et les media queries.

❌ À éviter

Ne pas imbriquer deux containers l'un dans l'autre. Les padding-inline s'accumulent et créent des marges internes excessives. Si un wrapper supplémentaire est nécessaire, utiliser un <div> sans classe container.

❌ À éviter

Ne pas surcharger max-width directement sur un container via du CSS inline ou une classe utilitaire. Modifier plutôt --container-padding-x ou utiliser la variante .container-{bp} appropriée.

Container · WEBDEV-UI DOCS / V1