LAPEYRE 2023 / Responsive

Schéma de synthèse

vue d'ensemble des breackpoints

.container2

Le container équivaut au couloir central du site.

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
`.container2`	100%	540px	720px	960px	1140px	1320px
`.container2-sm`	100%	540px	720px	960px	1140px	1320px
`.container2-md`	100%	100%	720px	960px	1140px	1320px
`.container2-lg`	100%	100%	100%	960px	1140px	1320px
`.container2-xl`	100%	100%	100%	100%	1140px	1320px
`.container2-xXl`	100%	100%	100%	100%	100%	1320px
`.container2-fluid`	100%	100%	100%	100%	100%	100%

@media

Mixins bootstrap

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }

Mixins custom

/* Usage */
@include xs { ... }
@include sm { ... }
@include sm-more { ... }
@include sm-less { ... }
@include md { ... }
@include md-less { ... }
@include md-more { ... }
@include lg { ... }
@include lg-less { ... }
@include lg-more { ... }
@include xl { ... }
@include xl-less { ... }
@include xl-more { ... }
@include xxl { ... }

// RESPONSIVE / BREAKPOINTS
// ------------------------------
$screen-xs-min:             0;
$screen-sm-min:             #{576/$rem-base}rem;    // 576px;
$screen-md-min:             #{768/$rem-base}rem;    // 768px;
$screen-lg-min:             #{992/$rem-base}rem;    // 992px;
$screen-xl-min:             #{1200/$rem-base}rem;   // 1200px;
$screen-xxl-min:            #{1400/$rem-base}rem;   // 1400px;
$screen-xs-max:             #{575/$rem-base}rem;    // 575px;
$screen-sm-max:             #{767/$rem-base}rem;    // 767px;
$screen-md-max:             #{991/$rem-base}rem;    // 991px;
$screen-lg-max:             #{1199/$rem-base}rem;   // 1199px;
$screen-xl-max:             #{1399/$rem-base}rem;   // 1399px;
$screen-xxl-max:            100%;

grid

Le site est conçu sur une grille de 12 colonnes avec un gouttière de 24px. Cette gouttière est invariable quel que soit le device.
La mécanique de grid permet de composer une page en divisant à loisir le contenu sur cette base de 12 colonne et d'adapter la composition device par device.

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
Largeur maximale du conteneur	Aucun (auto)	540px	720px	960px	1140px	1320px
Préfixe de classe	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# de colonnes	12
Largeur de gouttière	16px (8px de chaque côté d'une colonne)

Largeur égale

Utiliser .col pour tous les devices et .col-sm par exemple pour un usage "à partir de sm".

.col

.col-sm

Largeur custom

.col

.col-6

.col

.col-5

.col

.col-6 .col-md-4

Nb de colonne par ligne / device

.row2-cols-2 sur row2 signifie que l'on souhaite 2 colonnes par ligne.

.col

.row2-cols-5 sur row2 signifie que l'on souhaite 5 colonnes par ligne.

.col

.row2-cols-1 .row2-cols-sm-2 .row2-cols-md-4 = 1 colonne par défaut, 2 par ligne à partir de sm, 4 à partir de md

Column

Sans goutière

Ajouter la classe .no-gutters pour annuler les gouttières.

.col-sm-6 .col-md-8

.col-6 .col-md-4

Mais encore...

Il existe de nombreuses autres possibilités de custom (alignements horizontaux / verticaux, order, décalages, etc...). En savoir plus