CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menutwitter-bootstrap-3
Selaru Sinbath
Selaru Sinbath

Reputation: 651

How to left align bootstrap 3 dropdown menu?

enter image description here

In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class like <ul class="dropdown-menu pull-left" role="menu"> with my code, but it doesn't work. anyone has an idea how to do this ?

Here is my code

<!-- Static navbar -->
    <nav class="navbar navbar-inverse" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">

              <ul class="nav navbar-nav navbar-right text-uppercase">
                <li><a id="Home" href="index.html">Home</a></li>
                <!-- Visa drapdown-->
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>

                  <ul class="dropdown-menu pull-left" role="menu">
                    <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 01</a></li>
                      <li><a href="#">Menu Item 02</a></li>
                      <li><a href="#">Menu Item 03</a></li>
                      <li><a href="#">Menu Item 04</a></li>
                      <li><a href="#"></a></li>

                    </ul>

                  </li>

            </div><!--/.nav-collapse -->
          </div><!--/.container-fluid -->
        </nav>

Upvotes: 43

Views: 112130

Answers (7)

markokoen
markokoen

Reputation: 29

For a dropdown item that has been floated to the right of the screen, with its dropdown content flowing over the screen, just add the below code to prevent the content of the dropdown from flowing over the screen.

right: 0;

Upvotes: 1

Marcello
Marcello

Reputation: 1289

For Bootstrap 4:

There are CSS classes named: .dropup, .dropright and .dropleft.

<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Source: Bootstrap

Upvotes: 2

Suyash Gulati
Suyash Gulati

Reputation: 521

As the answers given above are too old, would like to provide working solution for Bootstrap 3.3.7.

enter image description here

Use the given css on your .dropdown-menu div :

.dropdown-left-manual {
  right: 0;
  left: auto;
  padding-left: 1px;
  padding-right: 1px;
}

Explaination :

  • "right:0;" to make then ending of menu inline with end of dropdown button.
  • "left:auto;" to override the left:0 given in dropdown-menu class by bootstrap.
  • paddings are used to correct hovers on menu item, can be ignored.

Upvotes: 16

Shivek Parmar
Shivek Parmar

Reputation: 2993

For Bootstrap 3.1.0 or above use .dropdown-menu-left or .dropdown-menu-right to display the drop down menus right or left side of the parent menu. In your case try following.

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> My Menu <span class="caret"></span></a>
      <ul class="dropdown-menu dropdown-menu-left" role="menu">
       <!-- write your code here -->
      </ul>
 </li>

Bootstrap is BEST

Upvotes: 31

Abhishek Goel
Abhishek Goel

Reputation: 19731

for Twitter Bootstrap 3

<div class="dropdown-menu pull-right">
    <!-- write your code here -->
</div>

hope it helps :)

Upvotes: 57

B_s
B_s

Reputation: 3036

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

Upvotes: 26

Ryan Janvier
Ryan Janvier

Reputation: 81

Change navbar-right to navbar-left and add a pull-right class to the UL. 

<ul class="nav navbar-nav navbar-left text-uppercase pull-right">

Check out the JSfiddle for an example.

http://jsfiddle.net/eqcpLj6k/1/

Upvotes: 8

Related Questions