[SOLVED] How to put some space between elements when bootstrap grid collapse?

How to put some space between elements when bootstrap grid collapse?

For example, see below code, when I resize the browser to very small width, the gird will collapse, so two button groups and text align in vertical, and there is no space between them, how can I add some space?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  
    <div class="col-md-2">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  <div class="col-md-8">
    asdf
    </div>
  </div>

Solution

You can set the margin-bottom initially or in the media where it changes like this:

@media (max-width: 991px){
    .col-margin{
        margin-bottom: 10px;
    }  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-2 col-margin">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  
    <div class="col-md-2 col-margin">
    <div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
    </div>
  <div class="col-md-8 col-margin">
    asdf
    </div>
  </div>

Check this out for more info about bootstrap grid system: http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

And this for better understanding of media: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp