Swap bootstrap down to lower horizontal right

Question

I have a drop-down menu that opens a series of icons under it (see Figure 1, names and photos have been deleted to ensure confidentiality)

I am trying to open this menu to the right of the child’s choice, and not below it (see Figure 2, from what I am trying to get. Images will open to the right of the drop-down list, not under It)

My current code is:

<div class="span4"> <div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#"> <h3>Choose Child</h3> <img id="mainIcons" src="boyStudent.png" alt="boyStudent"> <span class="caret"></span></a> <ul class="dropdown-menu"> <li> <div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons"> <h5>A</h5> <img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons"> <h5>J</h5> <img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a> </div> </li> </ul> 

I tried using the following example, which helps push down to the left. How do I make twitter bootstrap submenus to open on the left? but I could not figure out how to use this for what I was looking for.

thanks

Answer 1

What it looks like: -

Demo

Demo2 Cancel the submenu.

 <div class="span4"> <div class="btn-group"> <a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#"> <h3>Choose Child</h3> <img id="mainIcons" src="boyStudent.png" alt="boyStudent"> <span class="right-caret right"></span> </a> <ul class="dropdown-menu rightMenu"> <li> <div class="btn-group"> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons"> <h5>A</h5> <img id="mainIcons" src="boyStudent.png" alt="boyStudent"></a> <a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons"> <h5>J</h5> <img id="mainIcons" src="girlStudent.png" alt="girlStudent"></a> </div> </li> </ul> </div> 

CSS

  .rightMenu { position:relative; float:right; } .right-caret { border-bottom: 4px solid transparent; border-top: 4px solid transparent; border-left: 4px solid #000000; display: inline-block; height: 0; opacity: 1; vertical-align: top; width: 0; } .right { float:right; } 

Answer 2

Just add the pull-right <ul class="dropdown-menu"> to <ul class="dropdown-menu"> this way ...

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

Answer 3

I just add this class to dropdown-menu :

 .rightMenu { position:absolute; float:right; top: 0; left: 160px; } 

And it fits perfectly.

Answer 4

For those who may find this page in the future, now the official way to do this is to add the .dropdown-menu-right class to the .dropdown-menu-right down list.