Create a user-defined gap between two Bootstrap columns

Question

I want to create little panels/dashboard for my interface. In my case I want to have two panels like so

+-------------------------------+    +-------------------------------+
|                               |    |                               |
|                               |    |                               |
+-------------------------------+    +-------------------------------+

Generally it is easy with Bootstrap 3.

<div class="row">
  <div class="col-md-5">
  </div>
  <div class="col-md-5 pull-right">
  </div>
</div>

The problem is, the gap of col-md-2, as it is the case here, is way too big. I cannot use a col-md-1 gap, because then both sides do not have an equal size.

I also tried to add padding right and left, but that had not effect, too. What can I do here?

Answer 1

You could add a class which modifies the width of col-md-6. The width of this class is set to 50%. A smaller gap is achieved by reducing the width like so:

.dashboard-panel-6 {
   width: 45%;
}

Add this to your div elements. This way the width rule of col-md-6 gets overriden.

<div class="row">
  <div class="col-md-6 dashboard-panel-6">...</div>
  <div class="col-md-6 dashboard-panel-6">...</div>
</div>

Answer 2

You can use another div inside and give padding to that.

<div class="row">
  <div class="col-md-6">
    <div class="inner-div">
    </div>
  </div>
  <div class="col-md-6 pull-right">
    <div class="inner-div">
    </div>
  </div>
</div>

.inner-div{
   padding: 5px;
 }