Affiner l'espacement de la grille Bootstrap

Dans la disposition de votre grille Bootstrap, vous êtes confronté à un défi avec l'espacement entre les colonnes. Bien que la solution consistant à utiliser col-md-5 avec pull-left et pull-right puisse entraîner trop d'espace, une approche plus nuancée est disponible.

Solution : imbriquer une division dans les colonnes

Imbibez un div dans chaque colonne col-md-6 et appliquez la marge et le remplissage souhaités au div imbriqué. Cette approche maintient l'intégrité structurelle de la colonne tout en permettant un espacement supplémentaire au sein de chacune d'elles.

Code :

    

        
Widget 1
    
    

        
Widget 2
    

CSS :

.classWithPad {
    margin: 10px;
    padding: 10px;
}

Avec cette solution, vous pouvez facilement ajouter l'espacement souhaité à vos colonnes sans sacrifier la cohérence structurelle de la disposition de la grille.