title: Bootstrap 4 collapse not working when used in a flex
body: <p>I am having trouble with Bootstrap 4 collapse. it works perfectly fine if i don't use "d-flex" class in my form tag. </p>
  
  <p>However if i use "d-flex", the form is shown by default. when the #reservas_button is clicked, the form is toggled to hidden then back to shown.</p>
  
  <pre><code>    &lt;!--reservas--&gt;
  &lt;div id="reservas" class="container d-flex flex-column flex-sm-row align-items-center align-items-sm-start"&gt;
    &lt;h2 id="reservas_button" data-toggle="collapse" href="#reservas_form"&gt;RESERVAS&lt;/h2&gt;
    &lt;form id="reservas_form" class="collapse d-flex flex-wrap"&gt;
  
      ...
  
  &lt;/div&gt;
  &lt;!--/reservas--&gt;
  </code></pre>