BootstrapConteneur
Présentation des trois classes de conteneurs Bootstrap pour la mise en page
Conteneur Bootstrap
Toutes les pages Bootstrap doivent être placées dans un des trois conteneurs Bootstrap. Les deux premier conteneurs sont la classe container qui centre la grille sur une largeur fixe, qui s'adapte en fonction de la largeur de l'écran ou la classe container-fluid qui permet à la grille d'occuper toute la largeur de l'écran.<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<h1>Hello</h1>
</div>
</body>
</html>Modifier le conteneur Bootstrap
Si vous voulez modifier votre conteneur Bootstrap, rajoutez ce code dans votre propre feuille de style en prenant le soin de l'appeler APRES la feuille de style Bootstrapsi vous utilisez la classe container-fluid
.container-fuid {
background-color: brown;
}Ou si vous utilisez la classe container
.container {
width: 940px;
margin-right: auto;
margin-left: auto;
}Conteneurs Bootstrap réactifs
Les conteneurs réactifs vous permettent de spécifier une classe qui a une largeur de 100% jusqu'à ce que le point d'arrêt spécifié soit atteint, après quoi s'applique max-width pour chacun des points d'arrêt supérieurs. Par exemple, .container-sm est de 100% large pour commencer jusqu'à ce que le sm point de rupture est atteint, où elle s'intensifiera avec md, lg, xl et xxl.<div class="container-sm">100% large jusqu'au small breakpoint</div>
<div class="container-md">100% large jusqu'au medium breakpoint</div>
<div class="container-lg">100% large jusqu'au large breakpoint</div>
<div class="container-xl">100% large jusqu'au extra large breakpoint</div>
<div class="container-xxl">100% large jusqu'au extra extra large breakpoint</div>
Pour aller plus loin...
