Retirer les marges des colonnes bootstrap

Une technique rodée

Ce sujet est désormais bien connu des intégrateurs, le bout de code css qu’on retrouve souvent pour annuler les marges bootstrap est le suivant;

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

Dans notre fichier html ou php, on rajoute donc notre nouvelle classe no-gutter à nos div.row

<div class="row no-gutter">
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
    <div class="col-md-4">
        ...
    </div>
</div>

Ainsi tous les blocs « col-.. » à l’intérieur d’une classe « .row » n’auront plus les padding-left:15px et padding-right:15px par défaut.

Cette technique certes bien utile peut ne pas convenir à tous car plus on a de blocs imbriqués, plus ça devient compliqué car ils se retrouvent alors sans marge et collés les uns aux autres.Pour plus de flexibilité, on peut alors changer notre css comme suit

.no-gutter {
    padding-right:0;
    padding-left:0;
}

Désormais on peut appliquer cette classe aux seuls éléments qui nous interesse.Cela peut s’avérer plus pratique si l’on imbrique plusieurs éléments les uns à l’intérieur des autres et qu’on souhaite conserver certaines marges.

Enfin, on peut tout aussi bien se créer des classes additionnelles: par exemple no-padding-left, no-padding-right, que l’on peut multiplier pour les différentes tailles d’écran no-padding-right-sm no-padding-left-sm etc, afin d’enlever simplement les marges gauche ou les marges droite selon les différents cas

Un exemple concret avec boostrap

Partons d’un exemple concret: on souhaite afficher deux blocs l’un à coté de l’autre en utilisant boostrap.Le code serait donc le suivant.Une classe container pour centrer le tout, une classe row dans laquelle on placerait une colonne de 12 , contenant deux colonnes de 6

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="col-sm-6"></div>
      <div class="col-sm-6"></div>
    </div>
  </div>
</div>

• La classe container par défaut à 1170px ajoute des padding-left et padding-right de 15px.
• La largeur du contenu de bout en bout n’est plus à 1170px mais 1140px
• La classe row annule ces padding puisqu’il a lui même un padding-left de-15px et un padding-right de -15px.On revient donc à 1170px
• La dessus, une div englobante de classe col-sm-12 va rajouter à son tour des padding-left de15px et un padding-right de 15px.On revient donc à 1140px de largeur
• Enfin, si on additionne les deux blocs, on a donc à nouveau un padding-left en plus de 15px, et un padding-right de 15px supplémentaire.

Afin d’annuler les marges de manière spécifique afin que le contenu prenne bien 1170px de largeur, on va donc devoir annuler des marges de manière spécifique avec nos nouvelles classes no-padding-left et no-padding-right