title: Bootstrap nav submenu - multi column right alignment
body: <p>I have created a multi-col submenu in Bootstrap, the submenu is left align with the top level menu, but I need to make it right align with the top menu. </p>
  
  <p>I have tried to use absolute positioning, but no luck. 
  Please see the code at <a href="http://www.bootply.com/P3fltOTDRF" rel="nofollow">http://www.bootply.com/P3fltOTDRF</a></p>
  
  <pre><code>&lt;nav class="navbar navbar-default" role="navigation"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
      &lt;/div&gt;
      &lt;!--/.navbar-header--&gt;
  
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Item  &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
              &lt;/li&gt; 
  
              ...
              ...      
  
              &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Two Column &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu multi-column columns-2"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;ul class="multi-column-dropdown"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Something else here that's extra long so we can see how it looks&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;div class="col-sm-6"&gt;
                              &lt;ul class="multi-column-dropdown"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;!--/.navbar-collapse--&gt;
  &lt;/nav&gt;
  &lt;!--/.navbar--&gt;
  
  
  
  .dropdown-menu.columns-2 {
      min-width: 400px;
  }
  </code></pre>