bootstrap large drop-down menu stuck left

Question

i am having an issue with a menu using bootstrap. The small drop down menus open fine and are aligned however the large drop down menus always align left even if the menu heading is on the far right of the screen

i am looking to have one of the following happen

1 - open in the middle below the heading

2 - open to the right if its to far left

3 - open to the left if its to far right

i have created a fiddle of the issue https://jsfiddle.net/fu847jnw/2/

how can i acheive the above

<div class="navbar-cont">
<div class="container">
    <div class="row">
        <div class="span12">


            <div class="navbar navbar-default " role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse navbar-menubuilder">
                        <ul class="nav navbar-nav navbar-left">
                            <li><a href="/">Home</a>
                            </li>
                            <li><a href="/products">Products</a>
                            </li>
                            <li><a href="/about-us">About Us</a>
                            </li>
                            <li><a href="/contact">Contact Us</a>
                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">About Us</a>
                                    </li>
                                    <li><a href="#">Contact Us</a>
                                    </li>
                                    <li><a href="#">My Account</a>
                                    </li>
                                    <li><a href="#">Wish List</a>
                                    </li>
                                </ul>
                            </li>

                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Large Dropdown <b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </li>


                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">This Is Really Large Title <b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </li>

                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Just Another Menu Type<b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </li>

                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">Single Drop Down <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">About Us</a>
                                    </li>
                                    <li><a href="#">Contact Us</a>
                                    </li>
                                    <li><a href="#">My Account</a>
                                    </li>
                                    <li><a href="#">Wish List</a>
                                    </li>
                                </ul>
                            </li>


                            <li class="dropdown dropdown-large">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>

                                <ul class="dropdown-menu dropdown-menu-large row">
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Glyphicons</li>
                                            <li><a href="#">Available glyphs</a>
                                            </li>
                                            <li class="disabled"><a href="#">How to use</a>
                                            </li>
                                            <li><a href="#">Examples</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Dropdowns</li>
                                            <li><a href="#">Example</a>
                                            </li>
                                            <li><a href="#">Aligninment options</a>
                                            </li>
                                            <li><a href="#">Headers</a>
                                            </li>
                                            <li><a href="#">Disabled menu items</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Button groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Button toolbar</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Nesting</a>
                                            </li>
                                            <li><a href="#">Vertical variation</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Button dropdowns</li>
                                            <li><a href="#">Single button dropdowns</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Input groups</li>
                                            <li><a href="#">Basic example</a>
                                            </li>
                                            <li><a href="#">Sizing</a>
                                            </li>
                                            <li><a href="#">Checkboxes and radio addons</a>
                                            </li>
                                            <li class="divider"></li>
                                            <li class="dropdown-header">Navs</li>
                                            <li><a href="#">Tabs</a>
                                            </li>
                                            <li><a href="#">Pills</a>
                                            </li>
                                            <li><a href="#">Justified</a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="col-sm-3">
                                        <ul>
                                            <li class="dropdown-header">Navbar</li>
                                            <li><a href="#">Default navbar</a>
                                            </li>
                                            <li><a href="#">Buttons</a>
                                            </li>
                                            <li><a href="#">Text</a>
                                            </li>
                                            <li><a href="#">Non-nav links</a>
                                            </li>
                                            <li><a href="#">Component alignment</a>
                                            </li>
                                            <li><a href="#">Fixed to top</a>
                                            </li>
                                            <li><a href="#">Fixed to bottom</a>
                                            </li>
                                            <li><a href="#">Static top</a>
                                            </li>
                                            <li><a href="#">Inverted navbar</a>
                                            </li>
                                        </ul>
                                    </li>

                                </ul>

                            </li>


                        </ul>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

Answer 1

Here is an example using your code. In the HTML I added a class tmenu-menu to your last menu item, like this:

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tmenu <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row tmenu-menu">

Then added this code in the CSS

@media (min-width: 1200px) {
  .tmenu-menu {
    right: 0;
    left: inherit;
  }
}

Now when you view your site and the width of your browser is 1200px or bigger you will see the large menu sit on the right hand side of your screen. Then when you shrink down the menu once below 1200px the menu will go back to the left side. One SO answer provides the various break points sizes but these are also available on the bootstrap website.

You will have to add your own custom classes and position the menus based on where you want them for each width size. I have updated your js.fiddle with my example code (I also left in the different media sizes that BS uses). This code isn't complete but should help you get pointed in the right direction. Hope that helps.