Classiquement:
<div class="container-fluid"> <!-- container 100%de la page a ne pas mettre si container -->
<div class="container"> <!-- container width limitée a ne pas mettre si container-fluid -->
<div class="row"> <!--ligne d'éléments (12 colonnes)-->
<div class="col-md-6"><!--elements prenant 6 colonnes-responsive pour ecrans mediums -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores
cumque laborum dolore rerum vero distinctio non quod, minima enim
numquam facilis tempore porro ducimus autem fugiat assumenda sit,
illo ut?
</div>
<div class="col-md-3"><!--elements prenant 3 colonnes-responsive pour ecrans mediums -->
<img src="./images/Music_Icon.jpg" alt="blabla" />
</div>
<div class="col-md-3"><!--elements prenant 3 colonnes-responsive pour ecrans mediums -->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae
aut quo voluptates, natus, iusto sit iste quae dolore
</div>
</div>
</div>
</div>
| Breakpoint | Class infix | Dimensions |
|---|---|---|
| Extra small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| Extra large | xl | ≥1200px |
| Extra extra large | xxl | ≥1400px |
On peut ajouter des valeurs venues de Display Flex à l’interieur d’une <div> qui a une classe Row (Row a automatiquement du display flex)
Outil en ligne pour Utiliser les grilles de Bootstrap