Bootstrap: add margin/padding space between columns

Question

I'm trying to put some extra margin/padding space between columns on my Bootstrap grid layout. I've tried this but I don't like the result. Here is my code:

    <div class="row">         <div class="text-center col-md-6">             Widget 1         </div>         <div class="text-center col-md-6">             Widget 2         </div>     </div> 

I want to add margin: 10px and padding:10px. Some people suggest to change their classes to col-md-5 with pull-left and pull-right, but the gap between them will be too large.

Answer 1

Simply add a div within col-md-6 that has the extra padding that you need. The col-md-6 is the 'backbone' to keep the column integrity, but you can add additional padding within it.

<div class="row">     <div class="text-center col-md-6">         <div class="classWithPad">Widget 1</div>     </div>     <div class="text-center col-md-6">         <div class="classWithPad">Widget 2</div>     </div> </div> 

CSS

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