Search code examples
htmljquerybootstrap-4

Collasping bootstrap div goes under the bottom div

I am using bootstrap collapse class in a list of divisions. but collapsing division goes under the bottom item. It needs to resize browser after collapse to work well.

 <div>
 <div class="footer-co-src row">
    <div class="col-lg-3 col-sm-3 details-fly">
            <a  class="collapsed" data-toggle="collapse"  aria-expanded="true" aria-controls="collapseDetails-1" data-target="#collapseDetails-1">Button</a>
    </div>
  </div>

        <div class="collapse row" id="collapseDetails-1">
          <div class="card card-body"> sth to show 
          </div>
        </div>
 <div>

I have multiple of these divs, but showing div will be under the next item.

Solution

  • there is no bug in this piece of code. You are probably using some JS library that changes position type to position:absolute or position:fix.

    Check any list managing JS/Jquery source on your whole page.