Categories
Web Development

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.

By Tim Bunch

Tim Bunch is a Web Developer from Rockaway Beach, Oregon. As a web standards fanatic, he passionately pursues best practices. 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