title: change bootstrap drop down to drop horizontal right
body: <p>I have a drop down menu that opens a row of icons underneath it (see picture 1, names and pictures were removed to maintain privacy)
  <img src="https://i.stack.imgur.com/mV8n3.png" alt="enter image description here"></p>
  
  <p>I am trying to make this menu to open to the right of choose child, and not underneath it (see picture 2, of what I am trying to get. the Images will open to the right of the drop down and not under it)
  <img src="https://i.stack.imgur.com/cx5aN.png" alt="enter image description here"></p>
  
  <p>My current code is:</p>
  
  <pre><code>&lt;div class="span4"&gt;      
          &lt;div class="btn-group"&gt;
    &lt;a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#"&gt;
    &lt;h3&gt;Choose Child&lt;/h3&gt;
    &lt;img id="mainIcons" src="boyStudent.png" alt="boyStudent"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;
          &lt;div class="btn-group"&gt;
        &lt;a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons"&gt;
         &lt;h5&gt;A&lt;/h5&gt;
         &lt;img id="mainIcons" src="boyStudent.png" alt="boyStudent"&gt;&lt;/a&gt;
         &lt;a href="parent_homepage_2.html" style="text-align:center;" class="btn btn-link operationsButtons"&gt;
         &lt;h5&gt;J&lt;/h5&gt;
         &lt;img id="mainIcons" src="girlStudent.png" alt="girlStudent"&gt;&lt;/a&gt;
       &lt;/div&gt;
      &lt;/li&gt; 
    &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>I tried to use the following example, that helps push the drop down to the left 
  <a href="https://stackoverflow.com/questions/12187554/how-to-make-twitter-bootstrap-submenu-to-open-on-the-left-side">how to make twitter bootstrap submenu to open on the left side?</a>
  but I could not figure out a way to use this to what I am looking to do</p>
  
  <p>Thanks</p>