Add gap between two Divs - css

Question

I have a screen split in two, using two columns.
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>
I need a small (approx 10px) gap between the two columns.
http://www.bootply.com/vaOb1WdR5I
Can this be done?
Both boxes would need to reduce by 5 pix (in the above example), as I need the total width to remain.
Edit: Some ideas nearly work, but I am getting an extra Well that I don't want. With this:
<div class="row">
<div class="col-md-6">
#Html.Action("ShowDuePayments", "Transaction")
</div>
<div class="col-md-6">
#Html.Action("ShowRecentTransactions", "Transaction")
</div>
</div>
I get this:
The 'under' well div shouldn't be visible.

Answer 1

A couple of points:
You shouldn't add extra classes to the Bootstrap columns (that's not a hard and fast rule, but a good recommendation)
You are missing the container wrap.
Make changes using those rules and it looks like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="well">Left Top Box</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well">Left Bottom Box</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="well">Right Box</div>
</div>
</div>
</div>

Answer 2

How about this?
<div class="row">
<div class="col-md-6" style='padding-right:5px'>
<div class='well'>
Left Box
</div>
</div>
<div class="col-md-6" style='padding-left:5px'>
<div class='well'>
Right
</div>
</div>
</div>
http://www.bootply.com/Ogrte6IQzw
If you remove the inline styling, you will have the natural spacing provided by bootstrap, which is 15px padding.

Answer 3

You can change the class of col-md-6 and add width:49%, and to the 2nd div add pull-right class like:
HTML:
<div class="row">
<div class="col-md-6 well">
Left Box
</div>
<div class="col-md-6 well pull-right">
Right
</div>
</div>
CSS:
.col-md-6{
width:49%;
}

Answer 4

You can also try to add padding to the two div tags ie:
.col-md-6{
padding:5px;
}
This would add a bit of padding to all the sides - unless you use padding-left & padding-right and assign different class names to the divs - depending on how you want your code to be layed out.

Answer 5

You could also use an additional class so you only modify special column-6 elements and not all on your site. This example also uses percentage based widths as Flopet17s. You could tweak the percentage number to better fit your desired gap width.
.withgap {
width: 49%;
margin-right:1%;
}
<div class="row">
<div class="col-md-6 well withgap">
Left Box
</div>
<div class="col-md-6 well">
Right
</div>
</div>