Grille
Bootstrap permet de découper une ligne en 12 colonnes de largeur égale.
(bootstrap utilise flex en interne)
Méthode : Principe
Le contenu doit être enveloppé dans un conteneur de classe container
La ligne doit être un élément de classe row
Les colonnes doivent contenir la classe col-nb : nb étant un nombre et la somme des nb devant faire 12.
<div class="container">
<div class="row">
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
<div class="col-4">col-4</div>
</div>
<div class="row">
<div class="col-3">col-3</div>
<div class="col-8">col-8</div>
<div class="col-1">col-1</div>
</div>
</div>
Première ligne 3 colonnes de même largeur.
Deuxième ligne 3 colonnes de largeur 3, 8 et 1.
Méthode : Responsive
Pour tenir compte des différents supports. Bootstrap ajoute la notion de largeur d'écran.
Les classes peuvent être complétées par leur cas d'utilisation.
rien par défaut : Extra small <576px
sm : Small ≥576px
md : Medium ≥768px
lg : Large ≥992px
xl : Extra large ≥1200px
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
<div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
<div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
<div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
</div>
</div>
Modifiez la largeur de votre navigateur.
Méthode : Colonnes par ligne
Pour simplifier l'écriture, on peut définir au niveau de la ligne le nombre de colonne avec row-cols-nb nb étant le nombre de colonnes.
<div class="container">
<div class="row row-cols-3 my-2">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row row-cols-3 my-2">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row row-cols-4 my-2">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>
</div>
my permet d'ajouter une marge en haut et en bas