Grille

Bootstrap permet de découper une ligne en 12 colonnes de largeur égale.

(bootstrap utilise flex en interne)

MéthodePrincipe

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.

1
<div class="container">
2
    <div class="row">
3
        <div class="col-4">col-4</div>
4
        <div class="col-4">col-4</div>
5
        <div class="col-4">col-4</div>
6
    </div>
7
    <div class="row">
8
        <div class="col-3">col-3</div>
9
        <div class="col-8">col-8</div>
10
        <div class="col-1">col-1</div>
11
    </div>
12
</div>

Première ligne 3 colonnes de même largeur.

Deuxième ligne 3 colonnes de largeur 3, 8 et 1.

col-4
col-4
col-4
col-3
col-8
col-1
Grille 12 colonnes

MéthodeResponsive

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

1
<div class="container">
2
  <div class="row">
3
    <div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
4
    <div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
5
    <div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
6
    <div class="col-12 col-md-6 col-lg-3">col-12 col-md-6 col-lg-3</div>
7
  </div>
8
</div>
col-12 col-md-6 col-lg-3
col-12 col-md-6 col-lg-3
col-12 col-md-6 col-lg-3
col-12 col-md-6 col-lg-3
Responsive

Modifiez la largeur de votre navigateur.

MéthodeColonnes 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.

1
<div class="container">
2
  <div class="row row-cols-3 my-2">
3
    <div class="col">col</div>
4
    <div class="col">col</div>
5
    <div class="col">col</div>
6
  </div>
7
  <div class="row row-cols-3 my-2">
8
    <div class="col">col</div>
9
    <div class="col">col</div>
10
    <div class="col">col</div>
11
    <div class="col">col</div>
12
  </div>
13
  <div class="row row-cols-4 my-2">
14
    <div class="col">col</div>
15
    <div class="col-6">col-6</div>
16
    <div class="col">col</div>
17
  </div>
18
</div>

my permet d'ajouter une marge en haut et en bas

col
col
col
col
col
col
col
col
col-6
col
Colonnes par ligne