Structure HTML

La structure HTML est composée de 3 éléments:

• container: donne centre le contenu et lui donne une largeur maximum
• row: entoure les colonnes et leur permet de se positionner les unes à côté des autres
• col: représente une colonne dans laquelle seront inclus des éléments de contenu

<div class="container">
	<div class="row">
		<div class="col">Colonne 1</div>
		<div class="col">Colonne 2</div>
		<div class="col">Colonne 3</div>
	</div>
</div>

https://codepen.io/nbuntsch/pen/zYWgPbd

<aside> ☝ Si la largeur de colonne n’est pas spécifiée, les colonnes auront une taille égale. Par exemple, avec trois colonnes, chaque colonne fera 1/3 de la largeur.

</aside>

Spécifier la largeur des colonnes

Par défaut, la grille Bootstrap est répartie sur 12 colonnes.

Un élément d’une largeur de 1 fera donc 1/12 de la largeur du contenu, un élément d’une largeur de 2 fera 1/6 de la largeur du contenu, un élément d’une largeur de 3 fera 1/4 de la largeur du contenu, et ainsi de suite.

Pour spécifier la largeur d’une colonne, on ajoute un nombre après la classe col.

<div class="container">
	<div class="row">
		<div class="col-6">Colonne 1</div>
		<div class="col-3">Colonne 2</div>
		<div class="col-3">Colonne 3</div>
	</div>
</div>

https://codepen.io/nbuntsch/pen/xxWvPNY

Séparer les rangées

Lorsque la largeur totale des colonnes est plus grande que la largeur disponible, les colonnes passent à la ligne.

<div class="container">
  <div class="row">
    <div class="col-6">Colonne 1</div>
    <div class="col-3">Colonne 2</div>
    <div class="col-3">Colonne 3</div>
    <div class="col-3">Colonne 4</div>
    <div class="col-4">Colonne 5</div>
    <div class="col-4">Colonne 6</div>
  </div>
</div>

https://codepen.io/nbuntsch/pen/gOeVXNJ

Pour forcer un retour à la ligne à un autre endroit, on ajoute un élément row.