Space between selection boxes based bootstrap

Question

I'm developing a responsive form.
I have 3 select.
Desktop view:

Mobile view:

I want more space in mobile view between the selects.
How can i do this?
Here my HTML:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="row">
                            <div class="hidden-xs col-md-2" style="width:9.8%">
                                <label for="nose">choose:</label>
                            </div>
                            <div class="col-xs-12 col-md-2"  >
                                <select class="form-control" >
                                    <option  value="1">aaaaaaaaa</option>
                                </select>
                            </div>
                            <div class="col-xs-12 col-sm-12 col-md-2" >
                                <select class="form-control">
                                    <option value="1">bbbbbbbbb</option>
                                   

                                </select>
                               
                            </div>
                            <div class="col-xs-12 col-md-2"  >
                                <select class="form-control">
                                    <option value="1">cccccccccc</option>
                                </select>
                               
                            </div>
                             
                      </div>

Answer 1

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="row">
                            <div class="hidden-xs col-md-2" style="width:9.8%">
                                <label for="nose">choose:</label>
                            </div>
							</br></br></br>
                            <div class="col-xs-12 col-md-2"  style="padding-bottom: 1cm;">
                                <select class="form-control" >
                                    <option  value="1">aaaaaaaaa</option>
                                </select>
                            </div>
							
                            <div class="col-xs-12 col-sm-12 col-md-2" style="padding-bottom: 1cm;">
                                <select class="form-control">
                                    <option value="1">bbbbbbbbb</option>
                                   

                                </select>
                               
                            </div>
						
                            <div class="col-xs-12 col-md-2"  style="padding-bottom: 1cm;">
                                <select class="form-control">
                                    <option value="1">cccccccccc</option>
                                </select>
                               
                            </div>
                             
                      </div>
					  </br>

Here is your answer....

Answer 2

Using media queries, you could just add some margin-bottom to each element like so :

@media screen and (max-width: 1280px) {
   .col-xs-12 .col-md-2 {
       margin-bottom : 5px;
   }
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
   <div class="row">
      <div class="hidden-xs col-md-2" style="width:9.8%">
          <label for="nose">choose:</label>
      </div>
      <div class="col-xs-12 col-md-2"  >
          <select class="form-control" >
              <option  value="1">aaaaaaaaa</option>
          </select>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-2" >
          <select class="form-control">
              <option value="1">bbbbbbbbb</option>


          </select>

      </div>
      <div class="col-xs-12 col-md-2"  >
          <select class="form-control">
              <option value="1">cccccccccc</option>
          </select>

      </div>

</div>

Answer 3

Add margin-bottom: 5px; in mobile view css to select tag, or create another class with margin-bottom:5px and add that to dropdowns.

select
{
  margin-bottom:5px;
}

Or

    .selectmargin
    {
      margin-bottom:5px;
    }