No vertical space between Bootstrap form groups - css

Question

There are a few similar questions but none that really provide a solution for my issue (as far as I can see)
Here is my code:
<div class="form-group">
<div class="col-xs-3">
<label for="quantity">Quantity:</label>
<input type="quantity" class="form-control" min="1" max="100" ng-model="formData.quantity" required />
</div>
<div class="col-xs-9">
<label for="type">Type:</label>
<select class="form-control" name="type" ng-model="formData.type" required>
<option value="240" selected>240</option>
<option value="120">120</option>
</select>
<!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>
</div>
<div class="form-group">
<label for="type">Type 2:</label>
<select class="form-control" name="typ2 ng-model="formData.typ2e" required>
<option value="240" selected>240</option>
<option value="120">120</option>
</select>
<!--<input type="text" class="form-control" name="type" ng-model="formData.type"> -->
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.interests" class="btn btn-block btn-info">
Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
</div>
Between the form groups there is no vertical spacing, it's all joined together one on top of the other. Not sure what to do. Any help would be appreciated!

Answer 1

You can wrap all the code with the form-horizontal
<div class="form-horizontal">your code</div>
Or add to your css file next code:
.form-group::before,
.form-group::after {
content: " ";
display: table;
}