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.
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; }