How to add space between two wells in bootstrap 3?

Question

I have the following:

<div class="row"> <div class="well col-md-3">A</div> <div class="well col-md-9">The quick brown fox jumped over the lazy dog.</div> </div> 

It seems that they are next to each other. How to add a small distance between two wells? The old bootstrap version seemed to work automatically when I use span0 for a div containing "A" and span9, with a div containing the sentence.

Answer 1

If I fixed the same problem, adding a div to the middle of the other two

 <div class="col-lg-1 col-md-1 hidden-sm hidden-xs"> <!-- center buffer div --> </div> 

Answer 2

You can place your well containers inside col-* containers.

 <div class="row"> <div class="col-md-3"><div class="well">A</div></div> <div class="col-md-9"><div class="well">The quick brown fox jumped over the lazy dog.</div></div> </div> 

Or you will need to adjust the CSS margin-left of the 2nd well.

Demo: http://bootply.com/86483

Answer 3

A simpler solution:

Add well inside col-md-* to a separate div:

 <div class="row"> <div class="col-md-3"> <div class="well">A</div> </div> <div class="col-md-9"> <div class="well">The quick brown fox jumped over the lazy dog.</div> </div> </div>