Comment créer une disposition à 5 colonnes dans Bootstrap 4 ?

Comment créer une mise en page Bootstrap 4, 5 colonnes

Créer une mise en page à 5 colonnes dans Bootstrap peut être difficile, mais c'est possible avec quelques simples étapes.

1. Commencez avec un conteneur

La première étape consiste à créer un conteneur pour vos colonnes. Ce sera l'élément parent de toutes vos colonnes, et il devrait avoir la classe conteneur-fluide.

<div class="container-fluid">

2. Ajouter une ligne

À l'intérieur du conteneur, vous devrez ajouter une ligne. Ce sera le conteneur de vos colonnes, et il devrait avoir la classe row.

<div class="row">

3. Ajoutez vos colonnes

À l'intérieur de la ligne, vous devrez ajouter vos colonnes. Chaque colonne doit avoir la classe col et le nombre de colonnes souhaité dépend de la mise en page que vous essayez de créer. Pour une mise en page à 5 colonnes, vous devrez ajouter 5 colonnes.

<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>

4. Ajoutez du contenu à vos colonnes

Une fois que vous avez ajouté vos colonnes, vous pouvez y ajouter du contenu. Cela peut être du texte, des images ou tout ce que vous voulez.

<div class="col">
  <h1>Column 1</h1>
  <p>This is some content for column 1.</p>
</div>

5. Fermez vos balises

Une fois que vous avez ajouté toutes vos colonnes, vous devez fermer les balises de ligne et de conteneur.

</div>
</div>

6. Profitez de votre mise en page !

Vous avez maintenant créé avec succès une mise en page à 5 colonnes dans Bootstrap. Vous pouvez désormais styliser vos colonnes comme vous le souhaitez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!