bootstrap 3 - collapse 'jump' behaviour

Question

I am getting a weird behaviour when using bootstrap's collapse feature. When collapsing and uncollapsing, the div presents a 'jump' behaviour.

This is shown in the following fiddle.

Here's the code

<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search">   Refine Search   <span class="caret"></span> </button>  <div class="collapse refine-search-collapse-container well" id="refine-search">   <form class="form-horizontal">     <div class="form-group">       <div class="col-sm-6">         <select class="form-control">           <option value="">ad</option>           <option value="">sfsd</option>           <option value="">sdf</option>           <option value="">sf</option>           <option value="">sdf</option>         </select>       </div>     </div>     <div class="form-group">       <div class="col-sm-6">         <select class="form-control">           <option value="">Blah1</option>           <option value="">Blah2</option>           <option value="">Blah3</option>           <option value="">Blah4</option>           <option value="">Blah5</option>         </select>       </div>     </div>     <div class="form-group">       <div class="col-sm-6">         <input type="number" class="form-control">       </div>     </div>     <div class="form-group">       <div class="col-sm-6">         <select class="form-control">           <option value="">Yes</option>           <option value="">No</option>         </select>       </div>     </div>   </form> </div>  <div class="">   <h3>Search Result</h3> </div> 

Answer 1

The Jump in your collapse is due to .well (margin) class CSS.

.well class adds margin-bottom: 20px; which causes jump when the collapse gets display:none property. And the padding of .well also plays role in this jump.

To make it collapse smoother, add the .well class inside the .collapse DIV as shown below, and this CSS.

---

To escalate it quickly, .well class adds margin-bottom, padding, and min-height which causes jump, as it affects the box-model on display:none.

.refine-search-collapse-container .well {   margin-bottom: 0; }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>   <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#refine-search" aria-expanded="false" aria-controls="refine-search">   Refine Search   <span class="caret"></span> </button>  <div class="collapse refine-search-collapse-container" id="refine-search">   <form class="form-horizontal well">     <div class="form-group">       <div class="col-sm-6">         <select class="form-control">           <option value="">ad</option>           <option value="">sfsd</option>           <option value="">sdf</option>           <option value="">sf</option>           <option value="">sdf</option>         </select>       </div>     </div>     <div class="form-group">       <div class="col-sm-6">         <select class="form-control">           <option value="">Blah1</option>           <option value="">Blah2</option>           <option value="">Blah3</option>           <option value="">Blah4</option>           <option value="">Blah5</option>         </select>       </div>     </div>     <div class="form-group">       <div class="col-sm-6">         <input type="number" class="form-control">       </div>     </div>     <div class="form-group">       <div class="col-sm-6">         <select class="form-control">           <option value="">Yes</option>           <option value="">No</option>         </select>       </div>     </div>   </form> </div>  <div class="">   <h3>Search Result</h3> </div>