title: How to pull dropdown submenu to the left side in Bootsrap 4
body: <p>I am using Bootstrap 4 and I have multilevel dropdown as below :
  <a href="https://i.stack.imgur.com/xgVLp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xgVLp.png" alt="enter image description here" /></a></p>
  <p>I want to pull the submenus to the left. So the opposite side as it currently shows. I used multiple classes for example <code>dropdown-menu-left</code>, <code>pull-left</code> , <code>dropleft</code> but didn't change the direction of pulling the submenu.
  I also overrided the dropdown-menu classe but same result.</p>
  <pre><code>.dropdown-menu {
    left: auto;
    right: 0;
  }
  </code></pre>
  <p>Any suggestion please what's the right class in Boostrap 4 to pull the submenu to the left ? I tried solutions of other threads here but it's not working for me. Thank you very much.</p>
  <p>Here is my code :</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;&gt;
      &lt;title&gt;Bootstrap 4 Navbar With Multilevel Dropdowns Example&lt;/title&gt;
      &lt;link href=&quot;https://www.jqueryscript.net/css/jquerysctipttop.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.3.1/lumen/bootstrap.min.css&quot;&gt;
  
      &lt;style&gt;
    .dropdown-submenu {
      position: relative;
    }
    
    .dropdown-submenu a::after {
      transform: rotate(-90deg);
      position: absolute;
      right: 6px;
      top: .8em;
    }
    
    .dropdown-submenu .dropdown-menu {
      top: 0;
      left: 100%;
      margin-left: .1rem;
      margin-right: .1rem;
    }
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;nav class=&quot;navbar navbar-expand-lg&quot;&gt;
          &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbarNavDropdown&quot;&gt;
              &lt;ul class=&quot;navbar-nav&quot;&gt;
              &lt;li class=&quot;nav-item active&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home &lt;span class=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item active&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home 2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item active&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home 3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item active&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home 4&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item active&quot;&gt;
                  &lt;a class=&quot;nav-link&quot; href=&quot;#&quot;&gt;Home 5&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item dropdown&quot;&gt;
                  &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;http://example.com&quot; id=&quot;navbarDropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                  Dropdown link
                  &lt;/a&gt;
                  &lt;ul class=&quot;dropdown-menu&quot; aria-labelledby=&quot;navbarDropdownMenuLink&quot;&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;&lt;/li&gt;
                      &lt;li class=&quot;dropdown-submenu&quot;&gt;
                          &lt;a class=&quot;dropdown-item dropdown-toggle&quot; href=&quot;#&quot;&gt;Submenu&lt;/a&gt;
                          &lt;ul class=&quot;dropdown-menu&quot;&gt;
                          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Submenu action&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another submenu action&lt;/a&gt;&lt;/li&gt;
  
  
                          &lt;li class=&quot;dropdown-submenu&quot;&gt;
                              &lt;a class=&quot;dropdown-item dropdown-toggle&quot; href=&quot;#&quot;&gt;Subsubmenu&lt;/a&gt;
                              &lt;ul class=&quot;dropdown-menu&quot;&gt;
                              &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Subsubmenu action&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another subsubmenu action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class=&quot;dropdown-submenu&quot;&gt;
                              &lt;a class=&quot;dropdown-item dropdown-toggle&quot; href=&quot;#&quot;&gt;Second subsubmenu&lt;/a&gt;
                              &lt;ul class=&quot;dropdown-menu&quot;&gt;
                              &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Subsubmenu action&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another subsubmenu action&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  
  &lt;script src=&quot;https://code.jquery.com/jquery-3.4.1.slim.min.js&quot; integrity=&quot;sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js&quot; integrity=&quot;sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  
  &lt;script&gt;
      $('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
      if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
      }
      var $subMenu = $(this).next('.dropdown-menu');
      $subMenu.toggleClass('show');
    
    
      $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass('show');
      });
    
    
      return false;
    });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>