Changing the direction of a Bootstrap dropdown

Use pull-right or pull-left classes.

Here it is (using dropdown-menu-right):

<ul class="dropdown-menu dropdown-menu-right">
   <li><a href"#">Action</a></li>
   <li><a href="#">Another action</a></li>
<ul>

From http://getbootstrap.com/components/#dropdowns-alignment:

Deprecated .pull-right alignment
As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

In your case, adding dropdown-menu-right class to the div that has the dropdown-menu class should do the trick.

Bootstrap 4

use "dropdown-menu-right" and "dropdown-menu-left"

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          @username
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Account Settings</a>
          <a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Logut</a>
        </div>
      </li>

Output:

for more information visit documentation: https://getbootstrap.com/docs/4.0/components/dropdowns/