Bootstrap : Comment obtenir 5 colonnes ?
Développeur & Designer

Bootstrap : Comment obtenir 5 colonnes ?

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise les cookies pour vous garantir la meilleure expérience possible !