CODEWITHSUNDEEP
jquerycssflexboxbootstrap-4
Anthony
Anthony

Reputation: 87

Bootstrap 4 collapse not working when used in a flex

I am having trouble with Bootstrap 4 collapse. it works perfectly fine if i don't use "d-flex" class in my form tag.

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.

    <!--reservas-->
<div id="reservas" class="container d-flex flex-column flex-sm-row align-items-center align-items-sm-start">
  <h2 id="reservas_button" data-toggle="collapse" href="#reservas_form">RESERVAS</h2>
  <form id="reservas_form" class="collapse d-flex flex-wrap">

    ...

</div>
<!--/reservas-->

Upvotes: 4

Views: 4668

Answers (3)

Majnuel
Majnuel

Reputation: 311

Put the div with display flex into a wrapper and collapse the wrapper (another div), works well.

Upvotes: 4

Algorithmatic
Algorithmatic

Reputation: 1882

Try adding the following:

style="display:flex;"

instead of d-flex in you class.

Upvotes: 0

helloworld
helloworld

Reputation: 2311

Don't use d-flex in form tag. it is likely overwriting collapse. Your snippet works if you omit d-flex.

Upvotes: 0

Related Questions