Ajustando o espaçamento da grade do Bootstrap

No layout da grade do Bootstrap, você está enfrentando um desafio com o espaçamento entre colunas. Embora a solução de usar col-md-5 com pull-left e pull-right possa resultar em muito espaço, uma abordagem mais sutil está disponível.

Solução: aninhar uma div dentro de colunas

Aninhe uma div dentro de cada coluna col-md-6 e aplique a margem e o preenchimento desejados à div aninhada. Essa abordagem mantém a integridade estrutural da coluna enquanto permite espaçamento adicional dentro de cada uma.

Code:

    

        
Widget 1
    
    

        
Widget 2
    

CSS:

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

Com esta solução, você pode facilmente adicionar o espaçamento desejado às suas colunas sem sacrificar a consistência estrutural do layout da grade.