<p dir="auto">Hi</p>
<p dir="auto">When clicking on a button dropdown which is located close to the right side (RHS) of the screen, the dropdown overflows the screen.</p>
<p dir="auto">Steps:</p>
<ol dir="auto">
<li>goto: <a href="http://getbootstrap.com/components/#btn-dropdowns" rel="nofollow">http://getbootstrap.com/components/#btn-dropdowns</a> (on mobile or emulate screen in browser)</li>
<li>click on dropdown which is close to the RHS of screen.</li>
</ol>
<p dir="auto">Thanks in advance!</p>
<p dir="auto">A picture is worth a thousand words; this is taken directly from the docs with chrome at 515px wide.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/5419074/2854143/50ee4874-d14d-11e3-815a-0f0fe86f51ea.png"><img src="https://cloud.githubusercontent.com/assets/5419074/2854143/50ee4874-d14d-11e3-815a-0f0fe86f51ea.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I've implemented the following solution in my own project to remedy this, and would like to know if it is worth submitting a pull request for (modified, of course)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="$(document).on('shown.bs.dropdown', function () {
  OffsetDropdown()

  $(window).on('resize.bs.dropdown', function () {
    OffsetDropdown()
  })
})

$(document).on('hide.bs.dropdown', function() {
  $(window).off('resize.bs.dropdown')
})

var OffsetDropdown = function() {
  var dropdown = $('.open&gt;.dropdown-menu')

  if (dropdown.length == 0)
    return

  var rightOffset = dropdown.offset().left + dropdown.width()
  var browserWidth = $('body').innerWidth()
  var neededLeftOffset = dropdown.position().left - (rightOffset - browserWidth)

  if (neededLeftOffset &lt; 0) {
    dropdown.css({ left: neededLeftOffset - 3 })
  } else {
    dropdown.css({ left: 0 })
  }
}"><pre class="notranslate"><code class="notranslate">$(document).on('shown.bs.dropdown', function () {
  OffsetDropdown()

  $(window).on('resize.bs.dropdown', function () {
    OffsetDropdown()
  })
})

$(document).on('hide.bs.dropdown', function() {
  $(window).off('resize.bs.dropdown')
})

var OffsetDropdown = function() {
  var dropdown = $('.open&gt;.dropdown-menu')

  if (dropdown.length == 0)
    return

  var rightOffset = dropdown.offset().left + dropdown.width()
  var browserWidth = $('body').innerWidth()
  var neededLeftOffset = dropdown.position().left - (rightOffset - browserWidth)

  if (neededLeftOffset &lt; 0) {
    dropdown.css({ left: neededLeftOffset - 3 })
  } else {
    dropdown.css({ left: 0 })
  }
}
</code></pre></div>