title: Keeping a bit of vertical space between elements when they wrap?
body: <p>Using <code>Bootstrap</code>, when I'm putting a bunch of elements (e.g. <code>buttons</code>) in a row and shrink the window, the elements wrap around. </p>
  
  <p>But while there is some horizontal space between the elements when the window is wide enough to contain everything next to each other, vertically everything gets stuck together, with zero pixels of empty space between.</p>
  
  <p><a href="https://jsfiddle.net/zzq62rcv/" rel="noreferrer">Live example</a> (narrow or widen the output window to see the effect)</p>
  
  <p>Screenshot example:<br>
  1. <a href="https://i.imgur.com/EkigBm7.png" rel="noreferrer">Wide enough, notice space between buttons</a><br>
  2. <a href="https://i.imgur.com/2DQ0rBP.png" rel="noreferrer">Wrapping around, notice NO space between the buttons stacked on top of each other
  </a></p>
  
  <p>I guess I could mess around with some custom CSS, adding vertical margins or whatnot, but in order to keep things as compatible and standard as possible, I wonder if there is a better or more native way to fix this in a Bootstrap layout?</p>