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:

Answer 1

Update 2018

Bootstrap 4 now has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary.

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

You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.25rem left & right margins), etc...

Or, you can adjust padding on the columns (col-*) using the padding utils such as pl-0 (padding-left:0), pr-0 (padding-right:0), px-2 (.50rem left & right padding), etc...

Bootstrap 4 Column Spacing Demo

Notes

• Changing the left/right margin(s) on col-* will break the grid.
• Change the left/right margin(s) on the content of col-* works.
• Change the left/right padding on the col-* also works.

Answer 2

I would keep an extra column in the middle for larger displays and reset to default when the columns collapse on smaller displays. Something like this:

    <div class="row">
        <div class="text-center col-md-5 col-sm-6">
            Widget 1
        </div>
        <div class="col-md-2">
            <!-- Gap between columns -->
        </div>
        <div class="text-center col-md-5 col-sm-6">
            Widget 2
        </div>
    </div>