Here’s Why Your Bootstrap Collapsed Alert Jumps When Expanded

I’ve seen this Bootstrap issue countless times. A collapsed div is collapsed and expanded with Bootstrap Collapse. When it opens up, it appears to over-expand and then jump back up. It’s super annoying.

Here’s what your code might look like:

<div class="collapse alert alert-info" id="my-alert-box">My hidden alert box with some text.</div>

Here’s what you should do:

<div class="collapse" id="my-alert-box">
    <div class="alert alert-info">My hidden alert box with some text.</div>
</div>

The collapsed div can’t have padding applied to it. By moving the alert inside of the collapsed div, we solve the problem.

Published by

Tim Bunch

Tim Bunch is a Web Designer and Social Media Specialist at CapEd FCU from Boise, Idaho. As a web standards fanatic, he passionately pursues best practices in web design. He also actively engages people on a wide range of topics in a variety of social media networks. Tim is also an avid Wordpress developer, music maker, coffee drinker, and child raiser. @timbunch

Leave a Reply

Your email address will not be published. Required fields are marked *