title: Collapse in form-group
body: <p>I want to create a form-group row with multiple columns and then collapse each column separately, but according to the templates the "div class="collapse" has to stay above the "div class="form group row" which prevents me from putting taging separate columns to collapse. 
  EDIT: One button cannot collapse two separate elements (1. label 2.input). The code below shows only how can it be done with two buttons. Is there an easier way so that one button will actualy collapse bothe the label and input?</p>
  
  <pre><code>  &lt;div class="form-group row"&gt;
  &lt;label for="Payment1" class="col-sm-1 col-form-label"&gt;Payments:&lt;/label&gt;
    &lt;div class="col-sm-3"&gt;
      &lt;a class="btn btn-primary" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1"&gt;
        Payment 1
      &lt;/a&gt;     
  
      &lt;a class="btn btn-primary" data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2"&gt;
        Payment 2
      &lt;/a&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>
      Payment 1:<br>
      
        
      
     </p>
  
  <p><a href="https://jsfiddle.net/Dexter666/4ydq0upk/" rel="nofollow noreferrer">https://jsfiddle.net/Dexter666/4ydq0upk/</a></p>