How to Make Twitter Bootstrap Submenu to Open on the Left Side

how to make twitter bootstrap submenu to open on the left side?

The simplest way would be to add the pull-left class to your dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle: DEMO

How to pull dropdown submenu to the left side in Bootsrap 4

The issue you are having is because you have set left: 100% on .dropdown-submenu .dropdown-menu so when you add the .dropleft class it is being overridden by the left:100% remove this and it should work ok; please see below: https://jsfiddle.net/fdm6zer9/

Bootstrap: How do you open all the submenus to left side in Dropdown 4 and 5?

If I understand right you can add following lines the css class:

left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;

The css class must be like this:

.dropdown-submenu>.dropdown-menu{  top:0;  left: auto;  right: 100%;  margin-left: 0;  margin-right: -1px;  margin-top:-6px;   -webkit-border-radius:0 6px 6px 6px;  -moz-border-radius:0 6px 6px 6px;  border-radius:0 6px 6px 6px;}

How to left align bootstrap 3 dropdown menu?

Adding this style element to the dropdown <ul> will align the dropdown to the left side of the menu item:

left:0;

See this Bootply which targets the .dropdown-menu.pull-left and adds a left:0;.
This should solve your problem.

---

Update

I see that Bootstrap has deprecated pull-right and pull-left as of Bootstrap 3.1.0. Use dropdown-menu-left class to use built-in Bootstrap css to align the dropdown on the left edge so you don't need extra CSS. See this updated Bootply

Bootstrap: Position of dropdown menu relative to navbar item

This is the effect that we're trying to achieve:

The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.

Before v3.1.0

You can use the pull-right class to line the right hand side of the menu up with the caret:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu pull-right">
     <li>...</li>
  </ul>
</li>

Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/

After v3.1.0

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.

You can use the dropdown-right class to line the right hand side of the menu up with the caret:

<li class="dropdown">
  <a class="dropdown-toggle" href="#">Link</a>
  <ul class="dropdown-menu dropdown-menu-right">
     <li>...</li>
  </ul>
</li>

Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/

Bootstrap 4

The class for Bootstrap 4 are the same as Bootstrap > 3.1.0, just watch out as the rest of the surrounding markup has changed a little:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/

Bootstrap 5

Again, very similar for Bootstrap 5 except now it's dropdown-menu-end

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#">
    Link
  </a>
  <div class="dropdown-menu dropdown-menu-end">
    <a class="dropdown-item" href="#">...</a>
  </div>
</li>

Fiddle: https://jsfiddle.net/joeczucha/psnz2u36/

---

Related Topics