Supprimer la marge des colonnes

Dans certain cas pratique, la marge intérieur de la grille Bootstrap ne nous facilite pas le travail. Voici une astuce rapide et efficace qui supprimera la marge en cas de besoin et de manière isolée. Depuis l’arrivée de Bootstrap 4, la classe .no-gutters permet de supprimer les marges directement au sein de vos balises HTML […]

Posté le par Benoît Philibert|3140 vues

Dans certain cas pratique, la marge intérieur de la grille Bootstrap ne nous facilite pas le travail. Voici une astuce rapide et efficace qui supprimera la marge en cas de besoin et de manière isolée.

Depuis l’arrivée de Bootstrap 4, la classe .no-gutters permet de supprimer les marges directement au sein de vos balises HTML

Avec cette astuce, vous allez pouvoir afficher ou masquer le padding d’une colonne de manière isolée !

Dans une feuille de style CSS séparée des fichiers sources bootstrap.min.css, je vous invite à créer une classe que nous appellerons « no-padding » :

.no-padding { }

Par la suite, nous devons définir la cible. En utilisant « > [class*=’col-‘] » nous affirmons vouloir appliquer la classe CSS « no-padding » à toutes classes « col- » :

.no-padding > [class*='col-'] { }

Enfin, nous devons supprimer les padding latéraux de la manière suivante :

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

Maintenant que vous avez correctement défini la class CSS « no-padding », découvrons ensemble comment utiliser cette dernière au sein de notre page HTML :

<div class="row no-padding">
<div class="col-md-3">une colonne sans marge</div>
<div class="col-md-3">une colonne sans marge</div>
<div class="col-md-3">une colonne sans marge</div>
<div class="col-md-3">une colonne sans marge</div>
</div>

Dans le cas précis, nous définissons que toutes les colonnes insérées dans la div « row » auront 0px de marge interne.

Découvrons le résultat :


Ces articles pourraient vous intéresser

Tags

1 commentaire

  • […] Bootstrap et plus particulièrement dans la V3, je vous avais proposé une solution permettant de générer des colonnes sans padding. Cette solution aserait aujourd’hui facilement réglée avec les classes spacing et surtout […]

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.