Breakpoints & Containers ^commun

Ce schéma illustre les différents breakpoints, le nom des zones concernées ainsi que la largeur des containers pour chaque zone.

Les points de rupture sont les éléments fondamentaux du design adaptatif.
L'objectif est une conception responsive, pensée avant tout pour les mobiles.
Le CSS de Bootstrap applique le strict minimum de styles pour qu'une mise en page s'affiche correctement sur les écrans les plus petits, puis ajoute des styles pour l'adapter aux écrans plus grands. Cela optimise votre CSS, améliore le temps de rendu et offre une expérience utilisateur optimale.

Chaque point de rupture a été choisi pour accueillir confortablement des conteneurs dont la largeur est un multiple de 12. Ces points de rupture sont également représentatifs d'un sous-ensemble de tailles d'appareils et de dimensions de fenêtre d'affichage courantes ; ils ne ciblent pas spécifiquement chaque cas d'utilisation ou appareil. En revanche, ces plages offrent une base solide et cohérente pour une utilisation sur quasiment tous les appareils.

Voici un récapitulatif des différents media queries disponibles ainsi que les mixins associés.
Une version "custom" est également mise en place (syntaxe plus simple à utiliser).

@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(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

@include media-breakpoint-between(md, xl) { ... }

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

// 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 { ... }

Les conteneurs sont un élément fondamental de Bootstrap qui permettent de contenir, de remplir et d'aligner votre contenu au sein d'un appareil ou d'une fenêtre d'affichage donnée.
Ils équivalent au couloir central du site. Leur largeur varie en fonction du breakpoint.

Bootstrap propose 3 containers différents :

• .container qui définit le max-width à chaque breakpoint
• .container-fluid pour avoir un width:100% dans tous les cas de figure
• .container-{breakpoint} pour avoir un width:100% jusqu'au breakpoint mentionné

<div class="container">
  <!-- Content here -->
</div>

Les containers responsifs permettent de spécifier une classe occupant 100 % de la largeur jusqu'à ce que le point de rupture spécifié soit atteint
Retrouvez ci-après des exemples de mise en œuuvre des différents cas de container.

<div class="container themed-container">.container</div>
<div class="container-sm themed-container">.container-sm</div>
<div class="container-md themed-container">.container-md</div>
<div class="container-lg themed-container">.container-lg</div>
<div class="container-xl themed-container">.container-xl</div>
<div class="container-xxl themed-container">.container-xxl</div>
<div class="container-fluid themed-container">.container-fluid</div>

À utiliser pour avoir un container pleine largeur de l'écran.

<div class="container-fluid">
  ...
</div>