Si vous lisez ces lignes, vous connaissez probablement Bootstrap et que vous êtes sûrement à la recherche d’une solution pour afficher non pas quatre colonnes, non pas six colonnes… Mais cinq colonnes.
Comme vous, j’ai cherché cette réponse pendant un moment sur internet. Je vous propose mon aide afin que vous puissiez vous aussi obtenir cinq colonnes rapidement et simplement.
Avant de commencer, il faut comprendre le fonctionnement de Bootstrap. Ce framework se compose de douze colonnes. Pour utiliser ces colonnes, on ajoute une class qui se nomme “row” dans le code HTML, cette class permet de créer une ligne. Puis on ajoute nos colonnes en utilisant les class “col-1“, “col-2” … “col-12“.
Voici un exemple pour créer deux colonnes (2 x 6 = 12) ci-dessous :
<div class="row">
<div class="col-6">
Colonne 1
</div>
<div class="col-6">
Colonne 2
</div>
</div>
Maintenant que je vous ai rapidement expliqué le fonctionnement des colonnes, penchons nous sur la question “Comment obtenir 5 colonnes ?”.
Ajoutez le code ci-dessous à votre fichier CSS.
En fait, nous allons créer une class CSS intermédiaire aux class de colonnes existantes.
.col-2_4,
.col-sm-2_4,
.col-md-2_4,
.col-lg-2_4,
.col-xl-2_4 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.col-2_4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
@media (min-width: 540px) {
.col-sm-2_4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 720px) {
.col-md-2_4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 960px) {
.col-lg-2_4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
@media (min-width: 1140px) {
.col-xl-2_4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
max-width: 20%;
}
}
Puis ajoutez votre nouvelle class à votre code HTML
<div class="row">
<div class="col-2_4">
Colonne 1
</div>
<div class="col-2_4">
Colonne 2
</div>
<div class="col-2_4">
Colonne 3
</div>
<div class="col-2_4">
Colonne 4
</div>
<div class="col-2_4">
Colonne 5
</div>
</div>
Vous pouvez maintenant utiliser cinq colonnes partout sur votre site.
Merci pour ce petit tuto.
Cependant, si je peux me permettre une petite correction (autrement ça marche pas), il faut ajouter cette règle :
.row {
display : flex;
}
Bonjour Spip93, et merci pour votre commentaire.
En effet, il est important de préciser que cette méthode fonctionne avec « display : flex; ».
Néanmoins, il n’est pas utile de l’ajouter à votre propre CSS puisque Bootstrap intègre déjà cette règle à sa class .row