bootstrap fixed position button
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
&lt;div class="col-lg-2"&gt;
  Panel for filter
&lt;/div&gt;
 &lt;div class="col-lg-6"&gt;
&lt;button type="button" class="btn btn-info btn-md" data-toggle="modal" data-target="#product" style="margin-right:10px"&gt;my button&lt;/button&gt;
 then i show the contents  
 &lt;/div&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I have a row in bootstrap. The row is divided into two parts. One is a div for filter panel and second is to show some content. </p>

<p>I have a button in the second part <code>(bootstrap modal button)</code>. In the navigation breadcrumb, I'm giving an option to hide the filter panel. </p>

<p>All works fine. My problem is that when I hide the first div, In the <strong>filter panel my button in the second div also changes the position</strong>. </p>

<p>My requirement is that if I hide the filter panel, the button in the second div should not change even though the contents in the second div changes.</p>

<p>Does anyone know any workaround to achieve the desired result?</p>