title: Bootstrap dropdown list position (Up/Bottom) based on document height
body: <p>I have bootstrap dropmenu list on my page. When page is minimized or screen is adjusted, the menulist is going off the screen. I want to check and display them in upwards if screen height is making the list going off the screen.</p>
  
  <p>here is my html,</p>
  
  <pre><code> &lt;div  class="btn-group pull-right"&gt;                    
   &lt;button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt;Click&lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
                  &lt;ul  class="dropdown-menu pull-right" role="menu"&gt;
                      &lt;li&gt;First&lt;/li&gt;
                      &lt;li&gt;Second&gt;&lt;/li&gt;
                      &lt;li&gt;Third&lt;/li&gt;
                      &lt;li&gt;&lt;Fourth&lt;/li&gt;
                      &lt;li&gt;Fifth&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Note: List is going off in respective to height, not width. Width of the screen doesn't matter because i am already using "pull-right" which makes my list display inside the screen.</p>