How to display dropdown list below option in twitter bootstrap

Question

I wanted to show the dropdown list below the dropdown title. For example. The list will display just below of the title.

Currently the list is left justified/ always displaying from left. Here is the code snippet.

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Engineering <b class="caret"></b></a>

                        <ul class="dropdown-menu dropdown-menu-large">
                            <li class="col-sm-6">
                                <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>

                                </ul>
                            </li>
                            <li class="col-sm-6">
                                <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>

                                </ul>
                            </li>

                        </ul>

                    </li>